Question

我正在使用Jquery插件selectik。我试图根据我的第一个下拉选择来填充数据库中的下拉列表。我正在使用MVC 5.我在第一次下载的更改事件中使用以下代码。我无法在下拉列表中查看值。但是当我按F12并查找下拉列表时，我可以看到值存在。可以任何帮助如何使用seleckik插件。

 ***function company_change() {
        $("#automodel").empty();
        $.getJSON('@Url.Action("GetAutoModel")', { CompanyModel: $("#company").val() }, function (cdata) {
            $.each(cdata, function () {
                $("#automodel").append("<option value='" + this.AutoModelId + "'>" + this.AutoModelName + "</option>");
            });
        });
        $("#automodel").data("selectik").regreshCS();
    }***

Answer 1

首先让我解释一下插件是如何工作的，没有办法在下拉列表中应用样式。所以这个插件会隐藏实际的下拉，而是使用其他html元素（div，span ...）创建下拉式结构，其中的值存储在data-selectik属性中，如果可用，否则它将使用选项名称。您需要refreshCS（），因为当您在实际下拉列表中更新选项时，插件不知道更新，当您调用refreshCS（）时，它会重新读取数据并重新呈现可见的下拉列表。

为你正在应用插件的select元素的所有选项添加一个属性，插件在内部使用该属性来显示名称，如果你想格式化你可以的名字，它是一个选项值在实际选项中不做，比如这个

<option value="1" data-selectik="Spider man">Spider man<option>
更新新数据后刷新选择的功能是 refreshCS 而不是regreshCS 即$("#automodel").data("selectik").refreshCS();

将refreshCS放在success方法中，getJson是Async调用，所以无论getJSON调用的结果如何，都会执行最后一行。

function company_change() {
        $("#automodel").empty();
        $.getJSON('@Url.Action("GetAutoModel")', { CompanyModel: $("#company").val() }, function (cdata) {
            $.each(cdata, function () {
                $("#automodel").append("<option data-selectik='" + this.AutoModelName + "' value='" + this.AutoModelId + "'>" + this.AutoModelName + "</option>");
            });
            $("#automodel").data("selectik").refreshCS();
        });

    }

使用select jquery插件填充下拉列表

1 个答案: