从单个下拉列表到php中的multiselect的相关数据？

Question

我只有一个下拉列表，例如zone，当我选择zone时，他所在的zone下的多个状态数据将被放入多选表单字段中。

UI图像

AJAX代码

 $("#ZoneId").on("change", function (event) {
        $.ajax({
            async:true, 
            beforeSend:function (XMLHttpRequest) {
                $('#ZoneId').attr('disabled', true);
            }, 
            complete:function (XMLHttpRequest, textStatus) {
                $('#ZoneId').attr('disabled', false);
            }, 
            data:$("#ZoneId").closest("form").serialize(), 
            dataType:"html",
            type:"post", 
            url:REQUEST_URL+"State/get_state_by_zone" 
            success:function (data, textStatus) {
                //$("#my_multi_select1").empty();

                           //$('#my_multi_select1').multiselect('destroy');
                                 $("#my_multi_select1").append();                       
                            //var prePopulate = JSON.parse(data);
                            $.each(data, function (i, state) {
                                $("#my_multi_select1").append('<option value="' + i + '">' + state + '</option>');
                            });

                            $("#my_multi_select1").attr('multiple', 'multiple'); 
                            $("#my_multi_select1").multiselect('rebuild');

                            //$("#my_multi_select1").multiselect('refresh');

            }, 

        });
            return false;
    });

Answer 1

请参考此代码：

有关HTML和更多详细信息，请参见以下链接： enter link description here

$('#state').lwMultiSelect();

    $("#YourFirstSingleDropDownID").on("change", function (event) { 
        $.ajax({
            type:"post", 
            url:your_url_for_second_drop_down,
            async:true, 
            beforeSend:function (XMLHttpRequest) {
                $('#YourFirstSingleDropDownID').attr('disabled', true);
            }, 
            complete:function (XMLHttpRequest, textStatus) {
                $('#YourFirstSingleDropDownID').attr('disabled', false);
            }, 
            data:$("#YourFirstSingleDropDownID").closest("form").serialize(), 
            dataType:"html", 
            success:function (data, textStatus) {
                $("#YourSecondSingleDropDownID").html(data);
                $("#YourSecondSingleDropDownID").on("change", function(event){
                    $.ajax({
                        async:true, 
                        beforeSend:function (XMLHttpRequest) {
                            $('#YourFirstSingleDropDownID').attr('disabled', true);
                        }, 
                        complete:function (XMLHttpRequest, textStatus) {
                            $('#YourFirstSingleDropDownID').attr('disabled', false);
                        }, 
                        data:{your_first_drop_down_id}, 
                        dataType:"json", 
                        success:function (data, textStatus) {  

                               $.each(data, function (i, state) {
                                    $("#multi_select_id").append('<option value="' + i + '">' + state + '</option>');
                               });
                                $('#multi_select_id').data('plugin_lwMultiSelect').updateList();

                        }, 
                        type:"post", 
                        url:your_url_for_third_multi_drop_down
                    });
                });
            }
        });
            return false;
    });