Question

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

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

和

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

当选择country_id选项时，第二个组合（city_id）将填充某些数据。在填充之前，我首先从第二个组合中删除选项值。

请注意，此功能正常运行。现在我想将一些样式应用于我的连击。我决定使用SelectBoxIt by Greg Franko.

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

第二次更改#country_id并选择任何内容时出现问题期权价值。第二个组合（#city_id）保持不变，不会改变任何事情（留在以前的选择上）。

当我删除

 $("#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文档总是一个好主意，因为它们都有自己的处理方式。：）

两个组合，jquery选择插件只在一定条件下工作

1 个答案: