Question

我可以使用＆＃39;选择＆＃39;像下面这样的标签有多个选项值？

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

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

Answer 1

值始终为1，但是如果序列化JSON对象，就像您正在尝试的那样，在value属性中，您可以稍后使用JSON.parse()检索它，如下所示：

Javascript（使用jQuery加速，你可以做香草）

jQuery(document).ready(function($){
  $('select').on('change',function(){
    var val = JSON.parse( $(this).val() );
    console.log(val);
  });
});

警告：您的序列化对象不是有效的JSON format，您应该使用双引号而不是单引号。

Working example

Answer 2

为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()">

Answer 3

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

Answer 4

您始终可以使用非标准属性而不是value，然后以与使用value时类似的方式访问它们。例如，

<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");

当然，要符合标准，新属性应以data-开头，name表示form元素中的特殊内容，但您可以获得要点。

SELECT标签中的选项有多个值？

4 个答案:

Javascript（使用jQuery加速，你可以做香草）