Заполнение DropDown с использованием JQuery и объекта

Question

Я хочу заполнить варианты списка выпадающих списков с помощью объекта. например у меня есть объект, как

{"877":["email1@email.com"],"905":["email2@email.com"],"967":["email3@email.com"],"2":["email3@email.com","email5@email.com"]} 

Эти выпадающие будет зависеть от другого раскрывающегося списка, при выборе компании через выпадающий список, это письмо выпадающее будет заполнить в соответствии с выбранным кодом компании. 877,905,967,2 являются балансовыми единицами.

Answer 1

Может быть, не быстрее решение, но работает:

КОД:

var obj = { 
    "877": ["email1@email.com"], 
     "905": ["email2@email.com"], 
     "967": ["email3@email.com"], 
     "2": ["email3@email.com", "email5@email.com"] 
}; 


var select = $('<select></select>'); 
$.each(obj, function (index, val) { 
    if (obj[index].length > 1) { 
     $.each(obj[index], function(index2, val2){ 
      var option = $('<option value="' + index + '">' + val2 + '</option>'); 
      select.append(option[0]); 
     }); 
    } else { 
     var option = $('<option value="' + index + '">' + val + '</option>'); 
     select.append(option[0]); 
    } 
}) 
$('body').html(select); 

DEMO

Answer 2

Я понимаю, что вы хотите, чтобы содержимое второго ниспадающего изменяться в зависимости от содержимое первого. Если это так, то я хотел бы сделать это как follows:

Html:

Company code: <select id="cc"></select> 
<br/><br/> 
Email: <select id="email"></select> 

Код:

$(document).ready(function() { 
    var data = { 
     "877":["email1@email.com"], 
     "905":["email2@email.com"], 
     "967":["email3@email.com"], 
     "2":["email3@email.com","email4@email.com"]}; 
    $("#cc").change(function() { 
     $("#email").empty(); 
     $.map(data[$(this).children(":selected").val()], 
      function(val) { 
       $("#email").append($("<option></option>").val(val).html(val)); 
      }); 
    }); 
    for (var id in data) { 
     $("#cc").append($("<option></option>") 
         .val(id).html(id)); 
    } 
    $("#cc").trigger("change"); 
}); 

Answer 3

$(document).ready(function() { 
     var data = { 
      "-- Select Date --":["-- Select Date First Then Slot --"], 
      "06-Dec-2013":["10:00-12:00","2:00-4:00"], 
      "07-Dec-2013":["14:00-16:00"]}; 

     $("#exmDtId").change(function() { 
      $("#exmSlotId").empty(); 
      $.map(data[$(this).children(":selected").val()], 
       function(val) { 
        $("#exmSlotId").append($("<option></option>").val(val).html(val)); 
       }); 
     }); 
     for (var id in data) { 
      $("#exmDtId").append($("<option></option>") 
          .val(id).html(id)); 
     } 

     $("#exmSlotId").append($("<option></option>") 
          .val("-- Select Date First Then Slot --").html("-- Select Date First Then Slot --")); 

     //$("#exmDtId").trigger("change"); 
     }); 
<table width="100%" border="0" cellpadding="5"> 
           <tr> 
            <td width="30" align="center"> 
             <SPAN class="caption"><font color="red">*</font> </SPAN> 
            </td> 
            <td width="220"> 
             Exam Date 
            </td> 
            <td width="350"> 
             <select id="exmDtId"></select> 
            </td> 
           </tr> 
           <tr> 
            <td width="30" align="center"> 
             <SPAN class="caption"><font color="red">*</font> </SPAN> 
            </td> 
            <td> 
             Exam Batch 
            </td> 
            <td> 
             <select id='exmSlotId' name='exmSlot'></select> 
            </td> 
           </tr> 
</table>