Javascript 选择具有多个值的标记中的选项？

我可以使用下面的“选择”标记为选项设置多个值吗

<select name="data">
    <option value="{'name':'foo','type':'bar'}">Option one</option>
    <option value="{'name':'foo2','type':'bar'}">Option two</option>
</select>

选择一
选择二

---

如果是这样，那么如何使用javascript访问这些值

值始终为一，但是如果您序列化了JSON对象，就像您试图做的那样，在

value

属性中，您可以稍后使用

JSON.parse（）

检索它，如下所示：

Javascript（使用jQuery来提高速度，你可以做普通的） 警告：序列化对象无效，应使用双引号而不是单引号

---

给select标记一个ID。然后，通过带有“.value”的javascript访问它

<script>
function getValue() {
    var choice = document.getElementById('myTag').value;
    console.log(choice);
}
</script>

<select name="data" id="myTag">
    <option value="{'name':'foo','type':'bar'}">Option one</option>
    <option value="{'name':'foo2','type':'bar'}">Option two</option>
</select>
<br>
<input type="button" value="Get Data" onClick="getValue()">

函数getValue（）{
var choice=document.getElementById（'myTag'）。值；
console.log（选项）；
}
选择一
选择二

选择一
选择二
//你可以用类似这样的东西
//当您准备读取值时回调。
var userSelection=JSON.parse（document.getElementById（'dropdown'）.value）；
/*
*JSON.parse调用很重要，因为该值将
*最初以JSON格式作为字符串返回；但是我们
*而是要一个对象，这样我们就可以用
*点语法易于使用，所以我们使用它来转换它。
*/
var selectedName=userSelection.name；
var selectedType=userSelection.type；

您可以始终使用非标准属性而不是

值

，然后以与使用

值

时类似的方式访问它们。比如说,

<select name="data">
    <option name="foo" type="bar">Option one</option>
    <option name="foo2 type="bar">Option two</option>
</select>

当然，为了符合标准，新属性应该以

数据-

开始，而

名称

在

表单

元素中意味着一些特殊的东西，但您可以理解要点

<select name="data" id='dropdown'>
    <!-- ensure you're using proper json formatting here.  
                                   *strings are enclosed with double quotes.* -->
    <option value='{"name":"foo","type":"bar"}'>Option one</option>
    <option value='{"name":"foo2","type":"bar"}'>Option two</option>
</select>


<script>

    //you could use something like this in a 
    //callback when you're ready to read the values.
    var userSelection = JSON.parse( document.getElementById('dropdown').value );

    /*
     * the JSON.parse call was important because the value will 
     * initially be returned as a string in JSON format; But we 
     * want an object instead, so we can access its values with 
     * dot syntax for ease of use, so we use that to convert it.
     */



    var selectedName = userSelection.name;
    var selectedType = userSelection.type;


</script>

<select name="data">
    <option name="foo" type="bar">Option one</option>
    <option name="foo2 type="bar">Option two</option>
</select>

newData = $("[name='data']").filter(":selected").attr("name");
dataType = $("[name='data']").filter(":selected").attr("type");