Question

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

第一个下拉列表称为taxa 第二个下拉列表称为调查

到目前为止，我有这个：

        <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

我认为这个想法很重要，所以我只想在这里实现这个方法。

前端，您有一个parent-sel和一个child-sel，分别表示父选择和子选择
生成此HTML时，需要传递ParentOption - ChildOptions信息，最好是作为脚本标记中的json数组，如下所示：
{info：“这是你的json”}
在JS端，解析JSON数组并在内部存储。将一个onChange监听器添加到parent-sel，这个监听器将：
1. 读取所选值，从而获得相应的子sel数组信息
2. 让child-sel的html为空
3. 使用jQuery创建option元素，并将这些元素添加到Child Select。

然后完成;）

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

2 个答案: