javascript - 两个组合，jquery select 插件仅在特定条件下工作

Question

我的 asp.net mvc razor View 中有两个组合。

<select id="country_id" ... />  

和

<select id="city_id" ... />  

当选择 country_id 选项时，第二个组合 (city_id) 会填充特定数据。在填充之前，我首先从第二个组合中删除选项值。

只是提一下这个功能正常工作。现在我想应用一些样式到我的组合。我决定使用 SelectBoxIt by Greg Franko.

问题描述在初始渲染时，首先使用应用的 selectboxit 插件渲染组合。在 #country_id 更改第二个组合填充了预期值并且插件已正确应用。

Problem arises when I second time change #country_id and select any option value. Second combo (#city_id) stays intact, doesn't change anything (stays on previous selection).

当我删除

 $("#city_id").selectBoxIt();

从我的 updateData js 函数来看，一切正常(但这次没有将插件应用于第二个组合)。

/****** JS FILE ************/
$(document).ready(function () {
   $("#country_id").change(function () {
        updateData(new FilteredData($("#country_id :selected").val());
    });
})

function updateData(fdata) {    
    $.ajax({
        url: formatUrl('/.....'),
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(fdata),
        success: function (result) {            
            var dropDown = $("#city_id");
            // clear all previous options                        
            $("#city_id > option").remove();
            // populate the cities
            for (i = 0; i < result.length; i++) {
                dropDown.append($("<option />").val(result[i].Id).text(result[i].Name));                
            }
            ...
            $("#city_id").selectBoxIt();
        }
        ...
}

function FilteredData(country)
{
    this.country = country;
}

*************** _Layout.cshtml ***************
....
<script>
    $(document).ready(function () {
        $("#country_id").selectBoxIt();
    })
</script>

http://gregfranko.com/jquery.selectBoxIt.js/

Answer 1

要添加元素，您正在使用

dropDown.append($("<option />").val(result[i].Id).text(result[i].Name));

如您所述，它适用于标准 HTML。

对于 SelectBoxIt，每个 their documentation 需要不同的代码

dropDown.data("selectBox-selectBoxIt").add({ value: result[i].Id, text: result[i].Name });

并且，不要忘记删除所有选项代码:

dropDown.data("selectBox-selectBoxIt").remove();

检查您使用的任何插件的 API 文档总是一个好主意，因为它们都有自己的做事方式。 :)