Question

我正在尝试使用jquery选择的插件来满足其中一个要求。以下是步骤。

选择应用选择的标签位于隐藏的'div'中（单击按钮时会显示div）。
选项标签将动态填充。

采取措施触发所选择的。

            $(function()
            {
              $("select").chosen();
            }

===== 这就是我正在做的更新和再次触发所选择的。

            for(var i=0;i<3;i++)
            {
              $("select").append("<option value='value"+i+"'>Value"+i+"</option>");
            }

            $(".chosen-select").trigger("chosen:updated");

完成所有这些后，我没有得到正确的用户界面或选择没有被触发。任何人都可以看看吗？

提前致谢

Answer 1

使用选择的插件

查看依赖列表动态行为的小提琴

http://jsfiddle.net/vpanga/ep37owwr/

<强> HTML：

Parent List:
<select id="countryList" data-placeholder="Choose a Country..." style="width:350px;" multiple="" tabindex="1">
    <option value="">Select country</option>
    <option value="c1">Country-1</option>
    <option value="c2">Country-2</option>
    <option value="c3">Country-3</option>
    <option value="c4">Country-4</option>
</select>
<br />
<br />
Dependent List:
<select id="stateList" data-placeholder="State...by selected counry" style="width:350px;" multiple="" tabindex="2"></select>

<强>脚本：

$(function () {
    $("#countryList,#stateList").chosen();
    $("#countryList").on('change', function (e) {
        var data = {
            c1: [{ Value: "c1s1", Text: "C1-State1" }, { Value: "c1s2", Text: "C1-State2" }],
            c2: [{ Value: "c2s1", Text: "C2-State1" }],
            c3: [{ Value: "c3s1", Text: "C3-State1" }, { Value: "c3s2", Text: "C3-State2" }],
            c4: [{ Value: "c4s1", Text: "C4-State1" }]
        };

        updateStates(data);
    });
});

function updateStates(data) {
    var $SubItems = [],
        values = $("#countryList").val();
    if (values) $.each(values, function (i, c) {
        $.each(data[c], function (index, item) {
            $SubItems.push($("<option/>", { value: item.Value, text: item.Text }));
        });
    });

    $("#stateList").empty().append($SubItems).trigger("chosen:updated");
}

动态填充选项并触发选择的jquery

1 个答案: