动态填充选项并触发所选jquery

我正在尝试使用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"); 

---

for（var i=0；i请参阅此小提琴，了解choosen插件的依赖列表动态行为


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

父列表：
选择国家
国家1
国家2
国家3
国家4




从属列表：

脚本：

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

$（函数（）{
$（“#国家列表，#州列表”）.selected（）；
$（“#countryList”）。关于（'change'，函数（e）{
风险值数据={
c1:[{Value:“c1s1”，文本：“c1-State1”}，{Value:“c1s2”，文本：“c1-State2”}]，
c2:[{值：“c2s1”，文本：“c2-State1”}]，
c3:[{Value:“c3s1”，文本：“c3-State1”}，{Value:“c3s2”，文本：“c3-State2”}]，
c4:[{值：“c4s1”，文本：“c4-State1”}]
};
更新不动产（数据）；
});
});
函数更新属性（数据）{
var$SubItems=[]，
值=$（“#国家列表”）.val（）；
if（值）$。每个（值，函数（i，c）{
$。每个（数据[c]，函数（索引，项）{
$SubItems.push（$（“”，{value:item.value，text:item.text}））；
});
});
$（“#stateList”）.empty（）.append（$SubItems.trigger（“selected:updated”）；
}
向我们展示您的完整代码或使用源代码创建JSFIDLE，下面我添加了一个使用FIDLE的解决方案，以获得一个ideathanks a ton Venkata，您的语句$（“#stateList”）.empty（）.append（$子项）。触发器（“已选择：已更新”）；对我有效..我很高兴这有帮助，请标记为答案，以便此案例对其他人有用。我，这对我有效。我将此标记为正确。非常好！$（“#状态列表”）.empty（）.append（$SubItems）。触发器（“已选择：已更新”）；