ugrás a tartalomhoz

Multiple Select mező értékei

newyorkerboy · 2010. Május. 28. (P), 19.02
Üdv!
Hogy lehet lekérdezni JavaScript alól egy multiple select mező kijelölt értékeit? A value attribútum csak az utoljára kijelöltet adja vissza!
‹ Fancybox hiba IE-ben Fejlesztési módszertan/eszköz JS-es UI-hoz? ›
 ■
1

option tag(ok) selected tulajdonsága

solkprog · 2010. Május. 28. (P), 19.41
Végigmész az option tagokon és megnézed mindnek a selected tulajdonságát.
2

Multiple select

janoszen · 2010. Május. 28. (P), 22.23
A fenti ötleten túl, ha esetleg meg akarsz szabadulni a multiselecttől, próbálj meg egy ilyen megoldást: http://showcase.janoszen.com/css/scrolling-checkbox/
3

Már majdnem

newyorkerboy · 2010. Május. 29. (Szo), 13.13
Oké, köszi.
Két helyre kell ez a dolog: az egyik egy avatar kiválasztó (ez nem multiple), illetve egy kép kiválasztóhoz, ahova már igen. A gond az, hogy a kiválasztott elemek value értékét be kéne írni egy divbe, de mindegyiket csak egyszer. Kétféleképpen is próbáltam megírni: logikai változóval, és két tömmbel is, ahol az egyikben tároltam az összes kiválasztott elemet, a másikba pedig kiválogattam őket úgy, hogy mindegyik csak egyszer szerepeljen.

Vagyis, csak válogattam volna, mert nem ment. Meg tudnátok mondani, hogyan csináljam?
Tudom hogy ilyen kódrészletek biztosann kellenek bele:

egy féltétel, a program nagy része ezen belül van:
document.getElementById("picture_1").selected==true

illetve valami ilyesmi, egy cikluson belül:
showed[i]=document.getElementById("picture_1").value

ez egy cikluson belül, ahol listázom a kijelölt elemeket egyszer:
document.getElementById("pictures_preview_1").innerHTML+=showed[i]

Valaki össze tudná rakni nekem ezt a függényt? Már annyi féleképpen próbáltam, de elegem lett, és feladtam, kitöröltem azt is, amit összeszenvedtem. Az mindegyik értékét belerakta a showed tömbbe, ha csak az elsőt választottam ki, akkor bele rakta hogy "Value #1", utána pedig az összes elem értéke helyett hogy undefined.
4

Megoldottam, de még mindig rossz

newyorkerboy · 2010. Május. 29. (Szo), 15.28
Megcsináltam, de most valamiért mégsem működik rendesen. Így néz ki külön a html fájl, ahol megírtam a scriptet: (itt még jó)
  1. <script>  
  2. function pictures_list(){  
  3. var showed=new Array();  
  4. var i,count=0;  
  5. for(i=0;i<document.getElementById('row_1_pictures').options.length;i++){  
  6. if(document.getElementById('row_1_pictures').options[i].selected){  
  7. showed[count]=document.getElementById('row_1_pictures').options[i].value;  
  8. count++;}}  
  9. document.getElementById('pictures_preview_1').innerHTML=showed;}  
  10. </script>  
  11.   
  12. <form>  
  13.       <select id="row_1_pictures" onchange="javascript:pictures_list();" multiple>  
  14.         <option>sea zero  
  15.         <option>sea one  
  16.         <option>sea two  
  17.         <option>sea three  
  18.         <option>sea four  
  19.       </select>  
  20.       <div id="pictures_preview_1"></div>  
  21. </form>  
És valahogy így nézne ki használatban:
  1. function pictures_list(){  
  2. var counter=Number(document.getElementById("counter").value);  
  3. var showed=new Array();  
  4. var i,count=0;  
  5. for(i=0;i<document.getElementById("row_"+counter+"_pictures").options.length;i++){  
  6. if(document.getElementById("row_"+counter+"_pictures").options[i].selected){  
  7. showed[count]=document.getElementById("row_"+counter+"_pictures").options[i].value;  
  8. count++;}}  
  9. document.getElementById("pictures_preview_"+counter).innerHTML=showed;}  
  10.   
  11. <select id='row_1_pictures' onchange='javascript:pictures_list();' multiple><option>Kép 1<option>Kép 2<option>Kép 3</select>  
A counter értéke jó. Chrome alatt Uncaught TypeError: Cannot read property 'options' of null hibát kapok. Miért nem jó? :(
5

Diszkrét JavaScripttel

Poetro · 2010. Május. 30. (V), 20.12
  1. var select = document.getElementById('row_1_pictures'), // SELECT elem  
  2.     selected = []; // Kiválasztottak listája  
  3. if (select) {  
  4.   // Hozzáadjuk az eseményt a SELECT elemhez.  
  5.   select.onchange = function () {  
  6.     var options = this.getElementsByTagName('option'), // OPTION elemek  
  7.         i = options && options.length, // OPTION elemek száma  
  8.         option;                        // Aktuális OPTION elem  
  9.           
  10.     if (i) {                           // Ha vannak OPTION elemek...  
  11.       for (; i > 0; i -= 1) {          // végigmegyünk rajtuk..  
  12.         option = options[i - 1];       // kivesszük az aktuálisat...  
  13.         if (option.selected) {         // ha az ki van választva...  
  14.           selected.push(option.value); // akkor mehet a listába.  
  15.         }  
  16.       }  
  17.     }  
  18.   }  
  19. }  
6

Jee

newyorkerboy · 2010. Május. 31. (H), 19.48
Ezaz, köszönöm! Örök hála!