-3

オブジェクトを使用してドロップダウン リストのオプションを設定したいと考えています。たとえば、私はオブジェクトを次のように持っています

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

このドロップダウンは別のドロップダウンに依存し、ドロップダウンから会社を選択すると、選択した会社コードに従ってこの電子メール ドロップダウンが表示されます。877,905,967,2 は会社コードです。

4

3 に答える 3

0 
    $(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>
于 2013-12-06T10:10:51.553 に答える
0

より速い解決策ではないかもしれませんが、機能しています：

コード：

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

デモ

于 2013-06-13T19:19:28.213 に答える