Javascript 将选择框选项值设置为对象的代码

code to set a select box option value as an object

提问by mithunsatheesh

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

在我得到的 html 页面中，我有一个这样的带有值的选择框。

<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.

我想传递一个 javascript 数组或对象作为选项值。现在它将选项值视为字符串。

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

我希望它是一个数组，以便我可以通过

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

填充函数中的 this.value.name,this.value.age 。

is this possible?

这可能吗？

回答by Mark Coleman

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

您将无法在value属性中存储对象/数组，但是可以选择使用data-*jQuery 1.4.3+ 自动支持 json 的属性

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

And using .change()

并使用 .change()

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

Example on jsfiddle

jsfiddle 示例

回答by jAndy

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

不，不仅如此。值必须是字符串。我强烈建议使用类似 jQuerys 的.data()方法来保持Arrays或Objects在 expando 属性中。

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

如果它必须在值中，您只需要 JSON 解码 (.parse) 它：

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:

但同样，我认为这不是一个好的解决方案。看看http://api.jquery.com/jQuery.data/此外，如果您将 JSON 字符串放在任何data-HTML5 属性中，jQuery 将自动转换数组和对象。例如：

<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

如果您现在使用 jQuery 访问该节点，我们会自动在其数据扩展中获取该对象

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

回答by tvanfosson

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

使用的时候可以通过parseJSON将字符串转成对象，但值必须是字符串。

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