为select控件中的每个选项存储一个数组

Store an array to each option in select control

本文关键字：一个 数组 存储 选项 控件 select      更新时间：2023-09-26

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

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:的任何对象

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

您应该尝试将数组序列化为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>";
 });
相关文章：