Grab some Array data from a Select tag

Question

I am learning JQuery.
I got s Select Tag with some options in a very simple form like this:
(The form was generated by the Server and the values in each Option was retrieved from the database.)

<select name="data[Site1][quotenumber]" id="data[Site1][quotenumber]"> 
<option name="editquote" value="[29,1]">1</option> 
<option name="editquote" value="[24,2]">2</option> 
</select>

To get the value from the option selected, I used this code:

var whatValue = $('#data\\[\\Site1\\]\\[quotenumber\\] :selected').val();
alert(whatValue);

Now that I can get the value from the Select Tag, but the returned value was like an array, i.e. [29,1].
What is the best way to get the two values in each option?
I mean to print them out like this way:
The first value is 29, and the second one is 1.

Please help if you could

Why not give the select box a less confusing `id`? Aren't forms submitted by `name` anyway? — Eric, Jul 16 '10 at 17:00

Eric · Answer 1 · 2010-07-16T17:10:19.050

jQuery has no way of knowing that your value represents an array. Instead, it gets "[29,1]" as a string. You'll have exactly the same problem server-side.

It'd be better to use a lookup table and a unique id.

HTML:

<select name="data[Site1][quotenumber]" id="data[Site1][quotenumber]">  
    <option name="editquote" value="option-1">1</option>  
    <option name="editquote" value="option-2">2</option>  
</select>

Javascript:

var data = {
    'option-1': [29,1],
    'option-2': [24,2]
}

var whatId = $('#data\\[\\Site1\\]\\[quotenumber\\] :selected').val();
var whatValue = data[whatId];
alert(
    "The first value is " + whatValue[0] + ", " + 
    "and the second one is " + whatValue[1] + "."
);

Alternatively, you could use jQuery's $.parseJSON function, like this:

var whatValue = $.parseJSON(
    $('#data\\[\\Site1\\]\\[quotenumber\\] :selected').val()
);

That's better than using eval().

Jari · Answer 2 · 2010-07-16T17:13:07.997

1

Value is really confusing, but if you really want to access the individual numbers, you can use for example regexp to match the string and get the values in matcher:

var whatValue = $('#data\\[\\Site1\\]\\[quotenumber\\] :selected').val();
var re = /\[([0-9]+),([0-9]+)\]/;
var m = re.exec(whatValue);
alert("The first value is " + m[1] + ", and the second one is " + m[2] + ".")

edited Jul 16 '10 at 17:13

answered Jul 16 '10 at 17:04

Jari

2,152
13
20

score 1 · Accepted Answer · answered Jul 16 '10 at 17:06

1

This should work:

var whatValue = $('#data\\[\\Site1\\]\\[quotenumber\\] :selected').val();
alert(whatValue);

eval('var arr = ' + whatValue);
alert('The first value is: ' + arr[0]);
alert('The second value is: ' + arr[1]);

answered Jul 16 '10 at 17:06

Vijey

6,536
7
43
50

@Vijey. Your code is neat, clear, and working, but when I wanted to click your answer as the best, I saw mcgrailm's comment. I hope that some experts can help explain why eval() is not good. – user327712 Jul 16 '10 at 17:35
http://stackoverflow.com/questions/197769/when-is-javascripts-eval-not-evil see this link to answers to eval is evil – mcgrailm Jul 16 '10 at 17:44
rather than `eval`, it would be better to use `$.parseJSON`. See my answer. – Eric Jul 17 '10 at 16:56
Hi Kwokwai, I agree there is danger involved with eval. However, if you understand how evil it is, you can safeguard your code. The above link from mcgrailm gives a detailed explanation why it is evil. Eval can be dangerous because 1) it affects performance 2) code injection. But in your code, the eval is done on a very short length of code not on a very large piece of code. So performance will not be affected much. And I feel in your code, there isn't much scope for code injection. I'm just sharing my thoughts on this usage. I would ask you thoroughly test the code. – Vijey Jul 17 '10 at 17:05

mcgrailm · Answer 4 · 2010-07-16T18:08:09.487

1

I would say that your problem is really how you are outputting your options.. why are the values in that form anyhow ?

EDIT

another thought is this I'm not sure what your trying to get the values out in javascript or jquery so...

assuming your posting this data if you leave the html the way it is you could just parse the value in php ?

edited Jul 16 '10 at 18:08

answered Jul 16 '10 at 17:24

mcgrailm

17,469
22
83
129

@ mcgrailm. That's a good question, mcgrailm. Please take a look at this URL, my previous question. http://stackoverflow.com/questions/3245967/can-an-option-in-select-tag-carry-multiple-values – user327712 Jul 16 '10 at 17:32
I see your trying to get multiple values across so I get what your trying to do. While I don't know what the background of this is whole project is you seem to be making things hard on yourself giving your items id that have to be escaped and trying to pass multiple values. it may serve you better to find a way to identify the muutlple values in a singular way. maybe you have an array in php that defines an array of values and then you can just pass down the array index. and maybe for your id you use an underscore something like that – mcgrailm Jul 16 '10 at 18:03
@ mcgrailm. Thank you for your help. Yes, you are right. I might have made the code far complicated than it should be. – user327712 Jul 17 '10 at 16:39

Grab some Array data from a Select tag

4 Answers4

HTML:

Javascript: