Question

我目前正在构建动态选择控件，如下所示，

targetSelectCtrl.empty().html(function () {
    var appendData ='';
    $.each(result, function (key, value) {
        appendData += "<option title = '" + value.Name +
                    "' value='" + value.Id +
                    "' data-positions=" + value.PositionsList +
                    " data-isactive='" + value.IsActive + "'>" +
                    value.Name + "</option>";
    });
    return appendData;
});

value.PositionsList是一个javascript数组对象，我想在每个选项中存储它。我尝试了上面的代码，但它没有用。

这个想法是，每当用户更改选项时，我需要获取PositionsList以显示在网页中。请指导我如何实现这一目标。

Answer 1

你可以尝试这种方法，不需要编码/解码，你可以使用任何对象为PositionsList：

JSFiddle

var targetSelectCtrl = $("select");
var result = [
    {Name:'name1',Id:'id',PositionsList:[1,2,3,4],IsActive:'.'},
    {Name:'name2',Id:'id',PositionsList:[1,2,3,4],IsActive:'.'}
    ];
targetSelectCtrl.empty();

var option;
$.each(result, function (key, value) {
    option = $("<option/>").attr({
        title:value.Name,
    }).html(value.Name).data({
        positions:value.PositionsList,
        isactive:value.IsActive
    });

    targetSelectCtrl.append(option);

});

targetSelectCtrl.change(function(e) {
    console.debug(" positons",$(e.target).find("option:selected").data('positions'));
});;

Answer 2

您应该尝试将数组序列化为JSON对象。例如：

var appendData ='';

$.each(result, function (key, value) {
    // Encode as JSON:
    var serializedList = JSON.stringify(value.PositionsList);

    // Escape single quotes:
    serializedList = serializedList.replace(/'/g, "&#39;");

    appendData += "<option title = '" + value.Name+
                        "' value='" + value.Id+
                        "' data-positions='" + serializedList+
                        "' data-isactive='" + value.IsActive+ "'>" +
                        value.Name+ "</option>";

 });

将数组存储到select控件中的每个选项

2 个答案: