La creación de un cuadro de selección de forma dinámica con los datos de la matriz

estoy tratando de crear un cuadro de selección de forma dinámica con los datos que están dentro de una matriz, traté de ver a algunos JSON tutoriales, sin embargo, tener algunos problemas todavía.

 var clothes = [
     Red Dress:"reddress.png",
     Blue Dress:"bluedress.png",
     Black Hair Pin:"hairpin.png"
 ];

 var select = '<select id="clothing_options">';
 for(var i=0;i<clothes.length;i++)
 {
     select +='<option value="'+secondPart[i]+'">'+firstPart[i]+'</option>';
 }

 $('#select_box_wrapper').append(select+'</select>');

 $('#clothing_options').change(function() {
     var image_src = $(this).val();
     $('#clothing_image').attr('src','http://www.imagehosting.com/'+image_src);
 });

como se puede ver el código no está funcionando porque no está escrito correctamente. ¿Cómo puedo obtener los datos para el valor de la segunda parte y el texto de la opción de la primera parte? básicamente html debe tener este aspecto

   <select id="clothing_options">
      <option value="reddress.png">Red Dress</option>
      <option value="bluedress.png">Blue Dress</option>
      <option value="hairpin.png">Black Hair Pin</option>
   </select>

gracias por las explicaciones o sugerencias. Solo quiero que este código funcione, como me acaba de hacer estos códigos para las lecciones para mí

InformationsquelleAutor EasyBB | 2013-05-07

2 Kommentare

  1. 3

    Usted puede cambiar su matriz a un objeto JSON..

    var clothes = {
     "Red Dress":"reddress.png",
     "Blue Dress":"bluedress.png",
     "Black Hair Pin":"hairpin.png"
    };

    y, a continuación, la iteración se vuelve más fácil..

    for(var item in clothes)
    {
      $('<option value="'+item+'">'+clothes[item]+'</option>').appendTo('#clothing_options');
    }

    Aquí está el código HTML:

    <div id="select_box_wrapper">
      <select id="clothing_options"></select>
    </div>

    Demo

    • Gracias por la explicación. Ahora para la línea de for(var elemento en la ropa) elemento puede ser cualquier cosa?
    • sí, el var ‘item’ podría ser llamado nada. Representa cada elemento en el objeto json.
  2. 1

    Primer problema:

    var clothes = {
     Red_Dress:"reddress.png",
     Blue_Dress:"bluedress.png",
     Black_Hair_Pin:"hairpin.png"
    };

    Usted no puede tener espacios en los identificadores.

    Segundo, un bucle a través de un objeto:

     for (var key in clothes)
     {
         select +='<option value="'+clothes[key]+'">'+key+'</option>';
     }

    Por supuesto, esto tiene el efecto no deseado de la muestra ‘Red_Dress’ en el cuadro de selección.

    var clothes = {
     "Red Dress":"reddress.png",
     "Blue Dress":"bluedress.png",
     "Black Hair Pin":"hairpin.png"
    };

    Que solucionarlo.

    • Gracias por la explicación de todo esto

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea