JavaScript没有添加选择元素的选项

Question

这是我的脚本：

 <script>
$(function () {
    $("#selectUser").on("change", function () {
        alert('button clicked');

        var selectedUser = $(this).val();

        if (selectedUser != null && selectedUser != '') {
            $.getJSON('@Url.Action("GetAUsersRegisteredRoles")' + '/' + selectedUser, function (data) {

                var dualSelect = $('#dualSelectRoles1');
                dualSelect.empty();

                $.each(data, function (index, data) {
                    dualSelect.append($('<option/>', {
                        value: index,
                        text: data.text
                    }));
                });
            });
        }           
    }
    );
});

这是我要更新的html元素：

 <label>Select User</label>
    <span class="field">
        <select name="selectUser" id="selectUser">
            <option value="">Choose One</option>
            @foreach (var item in Model.Users)
            {
                <option value="@item.Id">@item.UserName</option>
            }
        </select>
    </span>

<label>Select Roles</label>
    <span class="dualselect">
        <select name="RolesSelect" id="dualSelectRoles1" multiple="multiple" size="10">
            <option value="">Admin</option>
            <option value="">User</option>
            <option value="">Technical</option>
            <option value="">Sales</option>
            <option value="">End User</option>
            <option value="">Cient</option>
        </select>
        <span class="ds_arrow">
            <span class="arrow ds_prev">&laquo;</span>
            <span class="arrow ds_next">&raquo;</span>
        </span>
        <select name="select4" multiple="multiple" id="dualSelectRoles2" size="10">
            <option value=""></option>
        </select>
    </span>

现在，我的脚本可以运行了：

当我单击用户时，选择我的警报弹出窗口，然后它调用我的操作方法，并返回json。

然后清除我的select元素以使其为空白，但随后不添加任何元素？ 我究竟做错了什么？

[编辑]

这是我的console.log(JSON.stringify(data)) ： ["Admin","Technical"]

Answer 1

data是一个字符串数组，因此没有属性text 。 单独使用值-从命名的角度来看，最好将每个循环中的data名称也更改为更能指示变量表示的内容：

$.each(data, function (index, val) {
    dualSelect.append($('<option/>', {
        value: index,
        text: val
    }));
});

这是上面的例子 。

Answer 2

代替

dualSelect.append($('<option/>', {
    value: index,
    text: data.text
}));

尝试

dualSelect.append('<option value="'+index+'">'+data+'</option>');

小提琴 。

这是由于getJson调用返回的是字符串数组（例如['a'，'b'，...]），而不是您期望的对象（例如{'text'：'a'，'text'：' b'}）。 因此，字符串数组没有属性'text'，并且将返回undefined。

Answer 3

您的代码中有一些需要考虑的问题。 首先，虽然它不会引起任何直接的问题或错误，但是不创建像它一样没有任何选择价值的选择。 因此，您最好更改节点，例如：

<option value="">Admin</option>

至

<option>Admin</option>

有关您的JavaScript代码的信息，如果您希望数据像这样的话：

data = [{text:"Admin"}, {text:"Technical"}];

那么创建您的选项就很有意义：

$('<option/>', { value: index, text: data0.text })

但是，正如您看到的那样，数据只是一个字符串数组，因此代码中的所有相关部分都是（但我已经对其进行了更改）：

var data = ["Admin","Technical"];
var dualSelect = $('#dualSelectRoles1');
dualSelect.empty();

$.each(data, function (index, value) {
    dualSelect.append($('<option/>', {
        value: index,
        //text: data.text
        text: value
    }));
});

如您所见，我已将每个迭代器函数中的参数名称data更改为value ，尽管在不同的闭包中使用重复的名称没有任何问题，但它降低了代码的可读性。

Answer 4

您在这里犯了一个非常小的错误。 尝试这个：

var data = {text : "test"};
var dualSelect = $('#dualSelectRoles1').empty();

$.each(data, function (index, obj) {
    dualSelect.append($('<option/>', {
        value : index,
        text : obj
    }));
});

工作示例： http : //jsfiddle.net/ashishanexpert/cG764/7/