0

我正在使用 Chosen 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 选择的变化。

4

2 回答 2

0

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

        <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{
                    }

        });
于 2013-07-14T16:39:43.557 回答
0

我相信想法很重要，所以我只是把如何实现这个东西放在这里。

  1. 前端，你有 aparent-sel和 a child-sel，分别表示父选择和子选择

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

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

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

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

然后完成；）

于 2013-07-14T16:54:58.937 回答