我需要将 JSON 存储在 HTML Select 对象中,想知道这是否可行?
例如:
<select id="music" >
<option value={mbid:123,artist:'Judas Priest'};>Heavy Metal 1</option>
<option value="{mbid:456,artist:'Black Sabbath'};">Heavy Metal 2</option>
<option value="{mbid:789,artist:'Iron Maiden'};">Heavy Metal 3</option>
<option value="{mbid:102,artist:'Accept'};">Heavy Metal 4</option>
</select>
$('#music').on('change', function() {
var val = this.value;
alert(val.mbid)
});
JSFiddle 示例:https://jsfiddle.net/rv7x38cw/
最佳答案
请您修改您的 HTML 和 JS 代码如下:
https://jsfiddle.net/rv7x38cw/2/
HTML:
<select id="music">
<option value='{"mbid":123,"artist":"Judas Priest"}'>Heavy Metal 1</option>
<option value='{"mbid":456,"artist":"Black Sabbath"}'>Heavy Metal 2</option>
<option value='{"mbid":789,"artist":"Iron Maiden"}'>Heavy Metal 3</option>
<option value='{"mbid":102,"artist":"Accept"}'>Heavy Metal 4</option>
</select>
JS:
$('#music').on('change', function() {
var str = this.value;
alert(str);
var val = $.parseJSON(str);
alert(val);
alert(val.mbid)
});
这里,关键的变化是;你必须将 value=' your JSON string '
放在单引号中,每个 JSON 的键名必须用双引号括起来,如 "mbid"
您也可以在下面的现场 fiddle 中结帐。
$('#music').on('change', function () {
var str = this.value;
alert(str);
var val = $.parseJSON(str);
alert(val);
alert(val.mbid)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="music">
<option value='{"mbid":123,"artist":"Judas Priest"}'>Heavy Metal 1</option>
<option value='{"mbid":456,"artist":"Black Sabbath"}'>Heavy Metal 2</option>
<option value='{"mbid":789,"artist":"Iron Maiden"}'>Heavy Metal 3</option>
<option value='{"mbid":102,"artist":"Accept"}'>Heavy Metal 4</option>
</select>
关于jquery - 选择框值中的 JSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39173017/