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

Question

Can I use 'select' tag like below to have multiple values for options?

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

If so, then how can I access the values using javascript?

Answer 1

The value is always one, but if you serialize a JSON object, as you seem you are trying to do, inside the value attribute, you can retrieve it later using JSON.parse() , like so:

Javascript (using jQuery for speed, you can do vanilla)

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

Warning: Your serialized object is not a valid JSON format , you should use double quotes instead of single ones.

Working example

Answer 2

Give the select tag an ID. And then, access it via javascript with “.value”

<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

You can always use non-standard attributes instead of value , then access them in a similar way as you would if you were using value . For example,

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

I'm not sure how or where you want to access them, as you didn't say, but I'll give an example:

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

Of course, to be standards-compliant, the new attributes should start with data- , and name means something special in form elements, but you get the gist.