如何根据另一个下拉列表中选择的值更新一个下拉列表

Question

我正在使用选择的jQuery插件来构建表单。 我希望一个下拉菜单中的选项可以指示第二个下拉列表中的哪些选项可用。

第一个下拉菜单称为分类单元

到目前为止，我有这个：

        <select data-placeholder="Choose a area of interest..." name="taxa" id="taxa" class="chzn-select" style="width:350px;" tabindex="2">
            <option value=""></option>
            <option value="he">Herps</option>
            <option value="ba">Bats</option>
            <option value="bi">Birds</option>
            <option value="ha">Habitat</option>
        </select>
        <br />
        <br />
        <select data-placeholder="Choose a survey..." name="survey" id="survey" class="chzn-select" style="width:350px;" tabindex="3">
            <option value=""></option>
            <option disabled value="op">Opportunistic</option>
            <option disabled value="tr">Transect</option>
            <option disabled value="mn">Mist Netting</option>
            <option disabled value="pc">Point Count</option>
            <option disabled value="da">Habitat Data</option>
        </select>
        <script type="text/javascript"> 
    $("#taxa").chosen().change(function(){


            var val = $(this).val();
                if(val == "he" || val == "la"){
                    $('#survey option[value="op"]').attr('disabled', false).trigger("liszt:upadted");
                    $('#survey option[value="tr"]'),attr('disabled', false).trigger("liszt:upadted");
                    } else if(val == "ba"){
                    $('#survey option[value="mn"]').attr('disabled', false).trigger("liszt:updated");
                    }else if(val == "ha"){
                    $('#survey option[value="da"]').attr('disabled', false).trigger("liszt:updated");
                    } else if(val == "bi"){
                    $('#survey option[value="op"]').attr('disabled', false).trigger("liszt:updated");
                    $('#survey option[value="mn"]').attr('disabled', false).trigger("liszt:updated");
                    $('#survey option[value="pc"]').attr('disabled', false).trigger("liszt:updated");
                    }else{
                    }
        });

上面的方法可以正常工作，但是无法识别#taxa选择中的更改。

Answer 1

好吧，终于破解了。 该代码既不漂亮也不优雅，但是可以工作：

        <select data-placeholder="Choose a area of interest..." name="taxa" id="taxa" class="chzn-select" style="width:350px;" tabindex="2">
            <option value=""></option>
            <option value="he">Herps</option>
            <option value="ba">Bats</option>
            <option value="bi">Birds</option>
            <option value="la">Large Mammals</option>
            <option value="ha">Habitat</option>
        </select>
        <br />
        <br />

        <select data-placeholder="Choose a survey..." name="survey" id="survey" class="chzn-select" style="width:350px;" tabindex="3">
            <option value=""></option>
            <option value="op">Opportunistic</option>
            <option value="tr">Transect</option>
            <option value="mn">Mist Netting</option>
            <option value="pc">Point Count</option>
            <option value="da">Habitat Data</option>
        </select>


        $("#taxa").chosen().change(function(){


            var val = $(this).val();
                $('#survey option').attr('disabled', true).trigger("liszt:upadted");
                if(val == "he"){
                    $('#survey option[value="tr"]').attr('disabled', false).trigger("liszt:updated");
                    $('#survey option[value="op"]').attr('disabled', false).trigger("liszt:updated");
                    }else if(val == "la"){
                    $('#survey option[value="op"]').attr('disabled', false).trigger("liszt:upadted");
                    $('#survey option[value="tr"]').attr('disabled', false).trigger("liszt:upadted");                       
                    } else if(val == "ba"){
                    $('#survey option[value="mn"]').attr('disabled', false).trigger("liszt:updated");
                    }else if(val == "ha"){
                    $('#survey option[value="da"]').attr('disabled', false).trigger("liszt:updated");
                    } else if(val == "bi"){
                    $('#survey option[value="op"]').attr('disabled', false).trigger("liszt:updated");
                    $('#survey option[value="mn"]').attr('disabled', false).trigger("liszt:updated");
                    $('#survey option[value="pc"]').attr('disabled', false).trigger("liszt:updated");
                    }else{
                    }

        });

Answer 2

我相信想法是重要的，所以我只在这里介绍如何实现此功能。

1. 在前端，您有一个parent-sel和child-sel ，分别指示parent-select和child-select

2. 生成此HTML时，您需要传递ParentOption-ChildOptions信息，最好作为脚本标签中的json数组，如下所示：

   {信息：“这是您的json”}

3. 在JS端，解析该JSON数组并在内部存储。 向父对象添加一个onChange侦听器，该侦听器将：

   1. 读取选择的值，从而获得相应的子sel数组信息
   2. 使子对象的html为空
   3. 使用jQuery创建option元素，并将这些元素添加到Child Select中。

然后完成;）