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

问题描述

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

I'm using the Chosen jQuery plugin to build a form. I'd like the option in one dropdown to dictate which options in a second dropdown are available.

第一个下拉列表称为分类单元第二个下拉菜单称为调查

The first dropdown is called taxaThe second dropdown is called survey

到目前为止，我有这个:

So far I have this:

        <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选择中的更改.

The above is sort of working but doesn't recognise changes in the #taxa selection.

推荐答案

我相信这个想法很重要，所以我只在这里介绍如何实现.

I believe idea is import so I just put how to implement this thing here.

1. 前端，您有一个parent-sel和child-sel，分别表示父选择和子选择

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

1. Front end, you have a parent-sel and a child-sel, indicating the parent-select and child-select, respectively

2. When you generate this HTML, you need to pass the ParentOption - ChildOptions information, perferably as a json array in a script tag, something like this:

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

On the JS end, parse that JSON array and store internally. add an onChange listener to the parent-sel, this listener would:

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

1. read the selected value, thus get corresponding child-sel array info
2. make child-sel's html to be empty
3. create the option element using jQuery, and add these elements into the Child Select.

然后完成;)

这篇关于如何根据另一个下拉列表中选择的值更新一个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！