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
    }));
});

以上是example Fiddle。

Answer 2

而不是

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

尝试

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

fiddle。

这是由于getJson调用返回一个字符串数组（例如[＆＃39; a＆＃39;，＆＃39; b＆＃39;，...]）而不是您期望的对象（例如{ ＆＃39; text＆＃39;：＆＃39; a＆＃39;，＆＃39; text＆＃39;：＆＃39; b＆＃39;}）。因此，字符串数组没有属性＆＃39; text＆＃39;并将返回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/

JavaScript不添加选择元素的选项

4 个答案: