Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

code to set a select box option value as an object

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?

like image 389
Mithun Satheesh Avatar asked Jul 04 '11 14:07

Mithun Satheesh


People also ask

How do you set the select box value?

You can select on any attribute and its value by using the attribute selector [attributename=optionalvalue] , so in your case you can select the option and set the selected attribute. $("div. id_100 > select > option[value=" + value + "]"). prop("selected",true);

What is the best way to add options to a select from a JavaScript object with jQuery?

Method 1: Append the option tag to the select box The select box is selected with the jQuery selector and this option is added with the append() method. The append() method inserts the specified content as the last child of the jQuery collection. Hence the option is added to the select element.

How do you get a dropdown value in TypeScript?

First, create the template variables for dropdown using #teams . Use the event binding to listen for the change event and link with the onSelect method. The onSelect method receives the reference variable and takes the value of the dropdown element. Next, create the onSelected(value) method in the TypeScript file.

How select a value in an option JavaScript?

To get the value of a select or dropdown in HTML using pure JavaScript, first we get the select tag, in this case by id, and then we get the selected value through the selectedIndex property. The value "en" will be printed on the console (Ctrl + Shift + J to open the console).


2 Answers

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

like image 113
Mark Coleman Avatar answered Oct 15 '22 01:10

Mark Coleman


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 
like image 32
jAndy Avatar answered Oct 15 '22 01:10

jAndy