Access values in select option tag with more than one value using javascript

Question

Here is my code.

<script type="text/javascript">
    function showDiv(divID,val) {
        var text= val.value;
        alert(text);
    }
</script>

Mouse:<select onChange="showDiv('#mouse',this);">
    <option value="">Select Mouse Type</option>
    <option value="{'text':'Normal','id':'normalMouse'}">Normal</option>
    <option value="{'text':'Gaming','id':'gamingMouse'}">Gaming</option>
</select>

The output is:

{'text':'Normal','id':'normalMouse'}

But The output should be 'normal' only. That means I want to access to those values separately.How to do that?

text = JSON.parse(text); alert(text.text);

KBN
– KBN

2014-05-01 09:25:25 +00:00
Commented May 1, 2014 at 9:25 — KBN
– KBN, Commented May 1, 2014 at 9:25

Bhavik · Accepted Answer · 2014-05-01 09:56:08Z

3

As per w3c org option doc's value can have only string value so it is necessary to convert it into object..

Working fiddle
Javascript code

function showDiv(divID, val) {
    var value = eval('(' + val.value + ')');
    alert('Text: "' + value['text'] + '" Id: "' + value['id'] + '"');
}

As @Johan say's using eval() is not a safe method.. So for the scenarios where safety is even concerned Working Fiddle using JSON.parse

HTML

<option value='{"text":"Normal","id":"normalMouse"}'>Normal</option>
<option value='{"text":"Gaming","id":"gamingMouse"}'>Gaming</option>

Javascript

function showDiv(divID, val) {
    var value = JSON.parse(val.value);
    alert('Text: "' + value['text'] + '" Id: "' + value['id'] + '"');
}

Hope it helps..!!

edited May 1, 2014 at 9:56

answered May 1, 2014 at 9:39

Bhavik

4,9044 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Johan Over a year ago

Never use eval() to parse JSON. In fact, don't use it at all. What if the user inject whatever javascript code he prefers to the attribute and triggers the event?

Asanka Herath Over a year ago

@bhavik you gave me the perfect answer. thanks a lot

Asanka Herath Over a year ago

@johan yes thats true. but I just wanted to demonstrate this only. So both of you gave me the correct answer. I dont consider security at all here.

Johan · Accepted Answer · 2014-05-01 09:25:29Z

0

Since you're saving an object in string format, how about parsing it first:

var o = JSON.parse(val.value);
console.log(o.text, o.id);

Though single quotes aren't valid for JSON keys nor properties, so I'd suggest that you store your extra data with the valid html5 data attribute e.g.

<option value="something" data-text="Normal" data-id="normalMouse">
    Normal
</option>

And access it using

var text = val.getAttribute('data-text'); // etc...

answered May 1, 2014 at 9:25

Johan

35.4k62 gold badges191 silver badges309 bronze badges

3 Comments

Batu.Khan Over a year ago

Or he can do JSON.parse(val.value.replace(/'/g,'"'))

Johan Over a year ago

@BatuZet True, allthough I prefer the latter example. If he wants to store complex objects associated with an element, jQuery's data method is the way to go, IMO.

Asanka Herath Over a year ago

@johan Thank you for the answer. I'll try it now and get back to you. :)

Chen-Tsu Lin · Accepted Answer · 2014-05-01 09:49:06Z

0

Convert ' to ", and then parse it to Json Format

<script type="text/javascript">
function showDiv(divID, val) {
    var text        = val.value,
        // convert ' to "
        jsonStrText = text.replace(/'/g, '"'),
        // parse to json
        jsonText    = JSON.parse(jsonStrText);

    alert(jsonText.text);
}
</script>

Or you can modify html to

<option value="{\"text\":\"Normal\",\"id\":\"normalMouse\"}">Normal</option>

And Directly parse to Json Format

<script type="text/javascript">
function showDiv(divID, val) {
    var text        = val.value,
        // directly parse to json
        jsonText    = JSON.parse(text);

    alert(jsonText.text);
}
</script>

edited May 1, 2014 at 9:49

answered May 1, 2014 at 9:31

Chen-Tsu Lin

23.3k16 gold badges57 silver badges65 bronze badges

Collectives™ on Stack Overflow

Access values in select option tag with more than one value using javascript

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related