JSON in Select Box Значение

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"

Вы также можете проверить в нижеприведенной живой скрипке.

$('#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>

Answer 2

Один из способов сделать это поместить значение в виде строки, например: {mbid:456,artist:'Black Sabbath'} и доступ к элементам с помощью $.parseJSON(val) или JSON.parse(val):

$('#music').on('change', function() { 
    var val = this.value; 
    val = JSON.parse(val); 
    alert(val.mbid); 
}); 

Answer 3

Как описано в HTMLOptionElement: значение DOMString Отражает значение атрибута HTML значение, если оно существует; иначе отражает значение свойства Node.textContent.

И:

DOMString является UTF-16 строк. Поскольку JavaScript уже использует такие строки, DOMString сопоставляется непосредственно с String.

Так что, да, вы можете использовать значение JSon, но это значение должно быть сериализованы в виде строки:

• JSON.parse() преобразовать строку в объект
• JSON.stringify () преобразует json-объект в строку.

$(function() { 
 
    $('#music').on('change', function() { 
 
    var val = JSON.parse(this.value); 
 
    console.log(val.mbid); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.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>