code to set a select box option value as an object

Question

in an html page i have got, i have a select box like this with values.

<select onChange="return filler(this.value);">
<option value="{'name':'rajiv',age:'40'}">a</option>
<option value="{'name':'mithun',age:'22'}">f</option>
</select>

i want to pass a javascript array or object as the option value. right now it is treating the option value as a string.

i want it to be an array so that i can access it by

this.value.name,this.value.age in the filler function.

is this possible?

Fruin

how to get data from select using java? – Ashantiashbaugh

Answer 1

You will not be able to store objects/arrays in the value attribute, however an option would be to use data-* attributes which supports json automatically with jQuery 1.4.3+

<select>
    <option data-value='{"name":"rajiv","age":"40"}'>a</option>
    <option data-value='{"name":"mithun","age":"22"}'>f</option>
</select>

And using .change()

$("select").change(function(){
    alert($(this).find(":selected").data("value").age);
});

Example on jsfiddle

Communalism

Passing a string and then converting it into JSON might ease the work... Answer to a similar question – Pokpoke

Answer 2

No, not just like that. Values have to be strings. I'd strongly recommend to use something like jQuerys .data() method to hold Arrays or Objects in an expando property.

If it must be in the value, you just need to JSON decode (.parse) it:

var myValue = JSON.parse(this.value);

myValue.age; // 40
myValue.name // rajiv

But again, I don't think this is a good solution. Have a look at http://api.jquery.com/jQuery.data/ Also, jQuery will automatically convert Arrays and Objects if you put the JSON strings in any data- HTML5 attribute. For instance:

<option value="A" data-info="{'name':'rajiv',age:'40'}">something</option>

If you access that node with jQuery now, we automatically got that object in it's data expando

$('option').data('info').name; // === rajiv

Brownie

could you expand on why using JSON.parse() isn't a good solution? – Laughingstock

Answer 3

You can use parseJSON to convert the string to an object when using it, but the value needs to be a string.

  var option = $('select').val();
  var selected = $.parseJSON(option);
  alert( selected.name + ': ' + selected.age );

Storiette

...and it would need to be made into valid JSON. – Guttate

Answer 4

React solution

const myObjects = [
    {
        text: 'a',
        value: 1
    },
    {
        text: 'b',
        value: 2
    },
];

const handleSelectChange = (myStringifyObject) => {
    const myObject = JSON.parse(myStringifyObject);
    // logic with myObject
} 

<input type='select' onChange={(evt) => handleSelectChange(evt.target.value)}>
    {myObjects.map((myObject) => (
        <option
            value={JSON.stringify(myObject)}
            key={myObject.value}
        >
            {myObject.text}
        </option>
     ))}
</input>

Rossiter

What if i have about 5000 options in my select box, I have to convert each of these? – Empire