存儲陣列，以每個選項中選擇控制

我目前建立一個動態選擇控制，如下所示，存儲陣列，以每個選項中選擇控制

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以顯示在網頁中。請指導我如何實現這一目標。

來源

2014-10-01 Vim

爲什麼之前沒有建立HTML的' html（）調用？ 'var myHtml =/* gen html * /; targetSelectCtrl.empty（）。html（myHtml）;' – DLeh 2014-10-01 14:00:57

您不能只將數組連接到字符串。無論如何你必須從中創建一個字符串。 – DontVoteMeDown 2014-10-01 14:02:25

「結果」對象來自ajax響應。所以，我收到響應後動態地填充選擇控件。目前，我在設置data-positions屬性中的JavaScript對象時發現問題。 – Vim 2014-10-01 14:03:19

你應該嘗試序列化數組作爲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>"; 

});

來源

2014-10-01 14:03:05 michaelb

好的，現在就試試。 – Vim 2014-10-01 14:06:51

您的解決方案適用於我。謝謝。 – Vim 2014-10-01 15:01:00

你可以試試這個方法，無需編碼/解碼，您可以使用任何對象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')); 
});;

來源

2014-10-01 14:07:17 jevgenig

謝謝您的建議和代碼示例。 – Vim 2014-10-01 15:02:00

存儲陣列，以每個選項中選擇控制

回答

相關問題