将“选择框”选项值设置为对象的代码-解网

问：

在我得到的 HTML 页面中，我有一个像这样的选择框，其中包含值。

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

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

我希望它是一个数组，以便我可以通过以下方式访问它

this.value.name，this.value.age 在 filler 函数中。

这可能吗？

javascript jquery html xhtml dhtml

评论

0赞 kamal 7/14/2015

如何使用 Java 从 Select 获取数据？

答：

6赞 tvanfosson 7/4/2011 #1

使用时可以使用parseJSON将字符串转换为对象，但值必须为字符串。

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

评论

0赞 user113716 7/4/2011

...并且需要将其转换为有效的 JSON。

15赞 jAndy 7/4/2011 #2

不，不只是那样。值必须是字符串。我强烈建议使用类似jQuerys方法的东西来保存或在expando属性中。.data()ArraysObjects

如果它必须在值中，你只需要对它进行 JSON 解码（.parse）：

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

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

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

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

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

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

评论

2赞 Ben S 6/19/2018

您能详细解释一下为什么使用不是一个好的解决方案吗？JSON.parse()

34赞 Mark Coleman 7/4/2011 #3

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

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

并使用.change()

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

jsfiddle 上的示例

评论

5赞 Bhavik 5/1/2014

传递一个字符串，然后将其转换为JSON可能会简化工作......类似问题的答案

2赞 Nicolas Bodin 10/12/2022 #4

React 解决方案

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>

评论

0赞 sairfan 1/21/2023

如果我的选择框中有大约 5000 个选项，我必须转换每个选项怎么办？

上一个：将“选择框”选项值设置为对象的代码

下一个：将 div 制作成链接