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

Question

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

1. 应用选择的选择标记位于隐藏的“div”中(单击按钮即可显示 div)。
2. “select”中的选项标记将动态填充。

触发所选择的步骤。

            $(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

请参阅此 fiddle 以了解所选插件的依赖列表动态行为

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");
}