JSON in Select Box Value

Question

I have the need to store JSON in a HTML Select object, and wondering if it's possible?

For example:

<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 example: https://jsfiddle.net/rv7x38cw/

Pankaj Makwana · Accepted Answer · 2017-10-17 11:31:54Z

Can you please modify your HTML and JS code as follows:

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)
});

Here, the key changes are; you have to put value=' your JSON string ' in single quote and each JSON's key name has to be surrounded by double quote like "mbid"

You can also checkout in below live 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>

gaetanoM · Accepted Answer · 2020-08-08 22:29:27Z

3

As described in HTMLOptionElement: value DOMString Reflects the value of the value HTML attribute, if it exists; otherwise reflects value of the Node.textContent property.

And:

DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.

So, yes, you can use a json value, but this value must be serialized as string:

JSON.parse() parses a JSON string, constructing the JavaScript value or object described by the string.
JSON.stringify() converts a JavaScript object or value to a JSON string

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

edited Aug 8, 2020 at 22:29

answered Aug 26, 2016 at 19:20

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

1 Comment

Martin James Over a year ago

"JSON.stringify() converts a json object to string" is wrong. Firstly, there is no such thing as a "json object" because JSON is a string. Secondly, JSON.stringify() converts an object to a JSON string. Also, "JSON.parse() convert a string to an object" reads wrong too. JSON.parse() converts JSON to an object, not a string.

v.coder · Accepted Answer · 2016-08-26 19:13:55Z

1

One of ways to do it is put the value as a string for example:{mbid:456,artist:'Black Sabbath'} and access the elements using $.parseJSON(val) or JSON.parse(val):

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

answered Aug 26, 2016 at 19:13

v.coder

1,9422 gold badges16 silver badges25 bronze badges

Collectives™ on Stack Overflow

JSON in Select Box Value

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related