無法從HTML選項中檢索自定義屬性。取而代之的是[對象對象]

Question

我一整天都在爲這個問題而苦苦掙扎。我正在對硬編碼的JSON文件進行ajax調用，並試圖使用自定義屬性將一些內容存儲到選項標籤中。當我嘗試檢索存儲在自定義屬性中的數據時，我一直在獲取[object Object]。如果我嘗試JSON.stringify（），我只是得到「[對象對象]」（與以前相同，除了用雙引號括起來）。

有些建議會非常有幫助。

這是在HTML我現在還是空的選擇標籤：

<select id="attackList"></select> 

實際JSON文件：

{"attacks":[ 
{ 
    "attackName":"Jab (1)", 
    "attackData":{"hitFrame":"9", "faf":"26", "damage":"1.5"} 
}, 

{ 
    "attackName":"Jab (3)", 
    "attackData":{"hitFrame":"11", "faf":"34", "damage":"2.7"} 
}, 

{ 
    "attackName":"Dash Attack (Early)", 
    "attackData":{"hitFrame":"15", "faf":"47", "damage":"10"} 
}, 

{ 
    "attackName":"Dash Attack (Late)", 
    "attackData":{"hitFrame":"21", "faf":"47", "damage":"8"} 
}, 

{ 
    "attackName":"Forward Tilt (1)", 
    "attackData":{"hitFrame":"12", "faf":"32", "damage":"3.5"} 
}, 

{ 
    "attackName":"Forward Tilt (3)", 
    "attackData":{"hitFrame":"14", "faf":"43", "damage":"8.5"} 
}, 

{ 
    "attackName":"Up Tilt(1, Early)", 
    "attackData":{"hitFrame":"7", "faf":"27", "damage":"5"} 
}, 

{ 
    "attackName":"Up Tilt (1, Late)", 
    "attackData":{"hitFrame":"9", "faf":"27", "damage":"2"} 
}, 

{ 
    "attackName":"Up Tilt (2)", 
    "attackData":{"hitFrame":"11", "faf":"27", "damage":"6"} 
}, 

{ 
    "attackName":"Down Tilt (Weak)", 
    "attackData":{"hitFrame":"7", "faf":"26", "damage":"6"} 
}, 

{ 
    "attackName":"Down Tilt (Strong)", 
    "attackData":{"hitFrame":"7", "faf":"26", "damage":"7"} 
}, 

{ 
    "attackName":"Forward Smash (Weak)", 
    "attackData":{"hitFrame":"19", "faf":"68", "damage":"14"} 
}, 

{ 
    "attackName":"Forward Smash (Strong)", 
    "attackData":{"hitFrame":"19", "faf":"68", "damage":"16"} 
}, 

{ 
    "attackName":"Up Smash (Early)", 
    "attackData":{"hitFrame":"18", "faf":"65", "damage":"17"} 
}, 

{ 
    "attackName":"Up Smash (Mid)", 
    "attackData":{"hitFrame":"20", "faf":"65", "damage":"16"} 
}, 

{ 
    "attackName":"Up Smash (Late)", 
    "attackData":{"hitFrame":"22", "faf":"65", "damage":"15"} 
}, 

{ 
    "attackName":"Up Smash (Late)", 
    "attackData":{"hitFrame":"22", "faf":"65", "damage":"15"} 
}, 

{ 
    "attackName":"Down Smash (1)", 
    "attackData":{"hitFrame":"20", "faf":"69", "damage":"5"} 
}, 

{ 
    "attackName":"Down Smash (2, Early)", 
    "attackData":{"hitFrame":"25", "faf":"69", "damage":"16"} 
}, 

{ 
    "attackName":"Down Smash (2, Late)", 
    "attackData":{"hitFrame":"26", "faf":"69", "damage":"15"} 
} 
]} 

AJAX調用填充選擇標籤：

$.ajax({ 
    url: attackerFileName, 
    dataType: 'json', 
    type: 'get', 
    cache:true, 
    success: function(data){ 
     $(data.attacks).each(function(index,value){ 
      console.log(value.attackData); 
      dropdownOptions.append($("<option></option>").attr("data-value", value.attackData).text(value.attackName)); 
     }); 
    } 
}); 

而且JS嘗試從當前選定的選項中檢索自定義屬性的代碼：

var selectedAttack = $("#attackList option:selected").data("value"); 
console.log(selectedAttack); 

任何人都有任何線索，爲什麼我無法從JSON中獲取實際的「attackData」內容？如果我添加代碼來記錄來自JSON的attackData元素並將其存儲到自定義屬性中，它就會恢復正常。但是在我檢索它之後，[object Object]就是我所能得到的。

非常感謝任何花時間研究這個問題的人！

Answer 1

html選項只能將原始值視爲字符串表示形式。 當您使用attr函數設置選項時，將採用該值的字符串表示形式。如果它是一個對象，您將返回[object Object]，因爲實際上存儲此值。

但是，您可以使用$.data函數將數據設置爲對象。

設置以下列方式中的數據值應該做的伎倆

$('<option></option>').data('value', value.attackData); 

或顯示在下面的代碼片段

'use strict'; 
 

 
var mock = [{ 
 
    name: 'Option 1', 
 
    value: { 
 
    identifier: 'option1', 
 
    value: { 
 
     hello: 'world' 
 
    } 
 
    } 
 
}, { 
 
    name: 'Option 2', 
 
    value: { 
 
    identifier: 'option2', 
 
    value: { 
 
     world: 'hello' 
 
    } 
 
    } 
 
}, { 
 
    name: 'Option 3', 
 
    value: { 
 
    identifier: 'option3', 
 
    value: { 
 
     sentence: 'hello world' 
 
    } 
 
    } 
 
}]; 
 

 
$(function() { 
 
    setTimeout(function(data) { 
 
    // fake postback 
 
    var targetElement = $('#dropdown'); 
 

 
    data.forEach(function(item) { 
 
     var option = $('<option></option>').data('value', item.value).text(item.name); 
 
     $(targetElement).append(option); 
 
    }); 
 

 
    }.bind(null, mock)); 
 

 
    $('#dropdown').on('change', function() { 
 
    var si = this.selectedIndex, 
 
     option = this.options[si], 
 
     name = option.text, 
 
     value = $.data(option, 'value'); 
 

 
    $('#output').html(name + '<br/>' + JSON.stringify(value)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="dropdown"> 
 
</select> 
 
<div id="output"> 
 
</div>