Question

我正在使用一个输入选择，我必须将json数据绑定到此控件。

以下是使用的输入选择：

＆＃13;

<select id="ms" multiple="multiple" name="selector">
                            
</select>

＆＃13;

＆＃13; 下面是用于页面加载时绑定数据的jquery：

＆＃13;

$(document).ready(function () {
        
        $('#ms').multipleSelect({
            width: '100%'
        });
        BindCategory();
  });
   function BindCategory()
    {
        $.ajax({
            url: "/Article/BindCategory",
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            success: function (response) {
                var sel = $('#ms');
                $.each(response.Categories, function (i, value) {
                    j=1;
                    sel.append('<option value="' + value + '">' + i + '</option>');

                    j++;
                });
            },
            error: function (er) {
                alert(er);
            }
        });
    }

＆＃13;

在这个bindcategory函数中我正在运行一个循环来逐个获取值并放入html选择控件但是在完成此过程之后数据不会在此控件中绑定。

我现在添加了响应的屏幕截图供您参考，如下所示：

Answer 1

我假设您正在使用https://github.com/wenzhixin/multiple-select多选插件。如果是这样，在文档中指定如果动态提取数据，则使用refresh重新加载select。

如果您通过AJAX或DOM操作方法在原始选择上动态添加/删除选项标记，请调用refresh以反映更改。

尝试将$(elm).multipleSelect('refresh');放入您的成功功能中。类似的东西：

 success: function (response) {
            var sel = $('#ms');
            $.each(response.Categories, function (i, value) {
                j=1;
                sel.append('<option value="' + value + '">' + i + '</option>');

                j++;
            });
            sel.multipleSelect('refresh');
        },

Answer 2

这是工作代码，

<select id="ms" multiple="multiple" name="selector"></select>

以下是修改后的JS代码。

function BindCategory(){
    $.ajax({
        url: "https://restcountries.eu/rest/v2/all",
        type: "GET",
        success: function (response) {
            var sel = $('#ms');
            $.each(response, function (i, value) {
                sel.append('<option value="' + value.name + '">' + value.name + '</option>');
            });
            sel.multipleSelect('refresh');
        },
        error: function (er) {
            console.log(er);
        }
    });
}

$(document).ready(function () {
    $('#ms').multipleSelect({
        width: '100%'
    });

    BindCategory();
});

只需根据需要将ajax网址更改为您的网址和sel.append('<option value="' + value.name + '">' + value.name + '</option>');以及此部分代码。让我知道它是否适合你。如果你想测试它，下面是工作小提琴。 Working fiddle. try it

将json数据绑定到输入选择

2 个答案: