Jquery Chosen正在更新本地选择框后面的级联选择

时间:2014-03-10 07:01:00

标签: javascript jquery jquery-chosen

我正在使用通过数据库填充的4个选择框中选择的jquery。

选择框ID为:#Year_395,#Make_395,#Model_395,#Trim_395。

我使用以下脚本“级联”它们,以便第二个选择框的选项取决于第一个选择的选项,第三个选项的选项取决于第二个选择等。

function cascadeSelect(parent, child){
    var childOptions = child.find('option:not(.static)');
    child.data('options',childOptions);

    parent.change(function(){
        var parentValue = (this.value).replace(" ", "_");
        childOptions.remove();
        child
             .append(child.data('options').filter('.sub_' + parentValue))
             .change();
    })

    childOptions.not('.static, .sub_' + parent.val()).remove();
}

原生选择框正确级联。问题在于,当我实现jQuery Chosen时,新的选择框会更新,但是在本机框后面一步。现在我使用下面的代码来更新jQuery Chosen的替换选择框显示的选项。这应该会导致jQuery Chosen在选择#Model_395的选项后立即更新#Trim_395。

$("#Model_395").chosen().change(function(){
    $("#Trim_395").trigger('chosen:updated');
});

以下是构建网站的the link

您将看到,如果您选择年份,品牌和型号,则不会有任何修剪选项,就像您尚未选择模型一样。如果您随后选择其他型号,将显示您选择的第一个型号的选项。选择第三个模型将显示第二个模型的修剪选项

1 个答案:

答案 0 :(得分:2)

我自己想通了。 jQuery Chosen在隐藏的选择框有时间更新之前进行了更新:

 $("#Model_395").change(function(){
 wto = setTimeout(function() {
     $("#Trim_395").trigger('chosen:updated');
}, 500);
 });

解决了这个问题。感谢任何看过的人:)