Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js]Tworzenie nowej listy z listy
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
skowron-line
20.11.2007, 09:37:44
Witam chcialbym utworzyc nowy obiekt typu <select> w oparciu o juz istniejacy, niby dosyc proste ale jednak.
kod
[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <script type="text/javascript">
  4.       function showOptions(){
  5.         var oList = document.getElementById('abc');
  6.         var oDiv = document.getElementById('oDiv');
  7.         var select = document.createElement('select');  
  8.           for(var i=0; i<=oList.length; i++){
  9.            // alert(oList.options[i].value);
  10.           // oListValue = oList.options[i].value;
  11.            //oListText = oList.options[i].text;
  12.             option = document.createElement('option');
  13.             option.setAttribute('value',oList.options[i].value);
  14.             var optionText = document.createTextNode(oList.options[i].text);
  15.             option.appendChild(optionText);
  16.             select.appendChild(option); 
  17.           }
  18.          oDiv.appendChild(select); 
  19.       }
  20.     </script>
  21.   </head>
  22.   <body onLoad="showOptions();">
  23.     <select id="abc">
  24.       <option value="a">ab</option>
  25.       <option value="b">bc</option>
  26.       <option value="c">cd</option>
  27.     </select>
  28.     <div id="oDiv"></div>
  29.   </body>
  30. </html>
[HTML] pobierz, plaintext

problem wyglada nastepujaco.
Kod
Error: oList.options[i] has no properties
Source File: file:///C:/AppServ/www/javascript/selectOptions.html
Line: 13

ale jak odkomentuje alerta to elegancko wywali on wszystkie wartosci tej listy
Revan
22.11.2007, 15:42:08
Chodzi o zwykłe skopiowanie elementu? Z użyciem jQuery może to wyglądać zupełnie tak:
Kod
$('#abc').clone(true).appendTo('#oDiv');
skowron-line
22.11.2007, 16:33:17
Cytat(Revan @ 22.11.2007, 15:42:08 ) *
Chodzi o zwykłe skopiowanie elementu? Z użyciem jQuery może to wyglądać zupełnie tak:
Kod
$('#abc').clone(true).appendTo('#oDiv');

Cytat
Z użyciem jQuery
ale ja nie wspominalem ze chce to zrobic przy uzyciu jQuery
BaN
22.11.2007, 16:47:53
Powinno działać:
Kod
function showOptions(){
     var select = document.createElement('select');
     var oList = document.getElementById('abc');
     var oDiv = document.getElementById('oDiv');
     for(var i=0,n=oList.length; i<n; i++){
       option = document.createElement('option');
       option.setAttribute('value',oList.options[i].value);
       option.appendChild(document.createTextNode(oList.options[i].text));
       select.appendChild(option);
     }
     oDiv.appendChild(select);
   }
skowron-line
22.11.2007, 16:59:34
Mam cos takiego
Kod
  for(var i=0;i<=oList2.length-1;i++){
        var oOption2 = document.createElement('option');
        oOption2.setAttribute('value',oList2Value[i]);
        oOption2 = document.createTextNode(oList2Text[i]);
        oSelect2.appendChild(oOption2);
      }

bo wczesniej wrzucilem do tablicy

z tym ze jest jeden problem
wszystko wrzuca mi do jednej opcji
i mam jedna do wyboru z 5 nazwami
BaN
22.11.2007, 17:55:46
O ile dobrze zrozumiałem, to chcesz utworzyć 5 selektów, więc wystaczy zrobić to w pętli. Dodałem dodatkowo 'name', gdyż chyba później te dane z formularza mają być wykorzystane.
Kod
function showOptions(){
   var i,j,select,oList = document.getElementById('abc'),n=oList.length
   var oDiv = document.getElementById('oDiv');
   for(j=1; j<=5; ++j) {
     select = document.createElement('select');
     select.setAttribute('name', 'nazwa' + j);
     for(i=0; i<n; i++){
       option = document.createElement('option');
       option.setAttribute('value',oList.options[i].value);
       option.appendChild(document.createTextNode(oList.options[i].text));
       select.appendChild(option);
     }
     oDiv.appendChild(select);
   }
}
skowron-line
23.11.2007, 10:22:41
nie no zle zrozumiales chce 1 select z 5 opcjami
BaN
23.11.2007, 12:31:23
Możesz wykorzystać funkcję, którą podałem wyżej lub krótszą wersję:
[HTML] pobierz, plaintext 
  1. <html><head>
  2. <script type="text/javascript">
  3. function createOptions(){
  4.     var i,opcje=[[1,'opcja 1'],[2,'opcja 2'],[3,'opcja 3'],[4,'opcja 4'],[5,'opcja 5']],n=opcje.length
  5.     var o=document.getElementById('abc').options
  6.     for(i=0;i<n;++i){
  7.         o[o.length]=new Option(opcje[i][1],opcje[i][0],false,false)
  8.     }
  9. }
  10. </script>
  11. </head>
  12. <body onLoad="createOptions()">
  13. <select id="abc">
  14. </select>
  15. </body></html>
[HTML] pobierz, plaintext
skowron-line
23.11.2007, 13:01:34
@BaN no to teraz mi dajes skrypt.
ja mam cos takiego

pobieram wartosci z juz istniejacej listy
Kod
var oList2 = document.getElementById('id_stawka_vat1');
   var oList2Value = new Array();
   var oList2Text = new Array();
   for(var i=0; i<=oList2.length-1;i++){
    oList2Value[i] = oList2.options[i].value;
    oList2Text[i] = oList2.options[i].text;
    //alert(oList1.options[i].value);  
   }


a potem wkladam do nowo utowrzonego
Kod
  oSelect2 = document.createElement('select');
         oSelect2.setAttribute('name','id_stawka_vat'+numRows);
         oSelect2.setAttribute('onchange','Netto('+numRows+')');
         oSelect2.setAttribute('onchange','Netto('+numRows+')');
       for(var i=0;i<=oList2.length-1;i++){
        var oOption2 = document.createElement('option');
        oOption2.setAttribute('value',oList2Value[i]);
        oOption2 = document.createTextNode(oList2Text[i]);
        oSelect2.appendChild(oOption2);
      }
BaN
23.11.2007, 14:08:28
Nie rozumiem w takim razie co chcesz zrobić. Kod który podałem w poście #4 tworzy selekta z opcjami na podstawie już istniejącego selekta, czyli tak jak chciałeś mieć. Jeżeli pierwszy ma trzy opcje, to drugi też będzie miał trzy. Jeżeli chcesz dopisać dodatkowe opcje do drugiego selekta, to wykorzystaj te same polecenia, ale z innymi parametrami.
skowron-line
23.11.2007, 14:29:04
jak na moje oko oba te skrypty sa takie podobne, ten sam sens ale inaczej napisane wiec nie rozumiem dlaczego nie dziala
nospor
23.11.2007, 14:39:04
Kod
var oOption2 = document.createElement('option');
        oOption2.setAttribute('value',oList2Value[i]);
        oOption2 = document.createTextNode(oList2Text[i]);
        oSelect2.appendChild(oOption2);

I przyjrzyj sie linijce 3 i temu co tam robisz

ps:
Cytat
ten sam sens ale inaczej napisane wiec nie rozumiem dlaczego nie dziala
A to ciekawe stwierdzenie smile.gif
Od kiedy ten sam sens idzie w parze z tą samą poprawnością kodu?
skowron-line
23.11.2007, 15:30:19
@BaN dzieki wielkie za kodzik, teraz dziala jak nalezy
@nospor oczywiscie konstruktywna krytyka
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.