选择框值中的 JSON

Question

我需要将 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/

Answer 1

您能否修改您的 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"

您还可以在下面的实时小提琴中结帐。

<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 str = this.value;
  alert(str);
  var val = $.parseJSON(str);
  alert(val);
  alert(val.mbid)
});