使用Jquery和Object填充下拉列表

我想使用对象填充下拉列表选项。e、 我有一个目标

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

---

此下拉列表将取决于另一个下拉列表，通过下拉列表选择公司后，此电子邮件下拉列表将根据所选公司代码填充。877905967,2是公司代码。

可能不是更快的解决方案，但有效：

代码：

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);

var obj={
"877": ["email1@email.com"],
"905": ["email2@email.com"],
"967": ["email3@email.com"],
"2": ["email3@email.com", "email5@email.com"]
};
var select=$（''）；
$。每个（对象、函数（索引、val）{
如果（对象[索引].长度>1）{
$.each（obj[index]，函数（index2，val2）{
var选项=$（''+val2+''）；
select.append（选项[0]）；
});
}否则{
var选项=$（''+val+''）；
select.append（选项[0]）；
}
})
$（'body'）.html（选择）；

---

我认为您希望第二个下拉列表的内容根据第一个下拉列表的内容而变化。如果是这样，我会这样做：

Html:

公司代码：



电邮：

代码：

$（文档）.ready（函数（）{
风险值数据={
"877":["email1@email.com"],
"905":["email2@email.com"],
"967":["email3@email.com"],
"2":["email3@email.com","email4@email.com"]};
$（“#cc”）.change（函数（）{
$（“#email”）.empty（）；
$.map（数据[$（this）.children（“：selected”）.val（）]，
功能（val）{
$（“#email”）.append（$（“”）.val（val.html（val））；
});
});
for（数据中的变量id）{
$（“#cc”）。追加（$（“”）
.val（id）.html（id））；
}
$（“#cc”）。触发（“更改”）；
});

$（文档）.ready（函数（）{
风险值数据={
“--选择日期--”：[“--先选择日期，然后选择插槽--”]，
“2013年12月6日”：[“10:00-12:00”，“2:00-4:00”]，
“2013年12月7日”：[“14:00-16:00”]}；
$（“#exmDtId”）.change（函数（）{
$（“#exmSlotId”）.empty（）；
$.map（数据[$（this）.children（“：selected”）.val（）]，
功能（val）{
$（“#exmSlotId”）.append（$（“”）.val（val.html（val））；
});
});
for（数据中的变量id）{
$（“#exmDtId”）。追加（$（“”）
.val（id）.html（id））；
}
$（“#exmSlotId”）。追加（$（“”）
.val（“--先选择日期，然后选择插槽--”）.html（“--先选择日期，然后选择插槽--”）；
//$（“#exmDtId”）。触发器（“更改”）；
});
* 
考试日期
* 
检验批

类似的风险值公司={“877”：[“aaa”]，“905”：[“bbb”]，“967”：[“ccc”]，“2”：[“ggg”，“ddd”]；对于（公司中的var文本）{var val=公司[text]；$（''）.val（val）.text（text）.appendTo（$（'#选择器'））}；

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");
});

    $(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>