Geek Answers Handbook

Select multiple in HTML5

I'm new to HTML5, and I'm trying to test <select> with the multiple attribute on forms in Google Chrome. I am facing two problems.

  • First, the list of options changes in the ugly rectangle

    Ugly rectangle with multiple attribute

    While before it was "normal":

    "normal" without multiple attribute

  • My second problem is that it seems that when I want to get select values ​​(by clicking a button and in the code using javascript), only one will be provided ...

Here is my code:

 <!DOCTYPE html> <html> <body> How do you travel? <form method="get" id=myForm" onsubmit="done();"> <select name="transport" multiple> <optgroup label="Ecological"> <option value="Feet" selected>By Foot</option> <option value="Bike">By Bike</option> </optgroup> <optgroup label="Non-ecological"> <option value="public transports">With public transports</option> <option value="motorbike">By motorbike</option> <option value="car">By car</option> </optgroup> </select> <button onclick="bdone();">button</button> <script> function bdone(){ var mesOptions=document.getElementsByTagName('select')[0]; alert(mesOptions.value); } </script> </body> </html>

Thanks for reading me!

+4
source share
1 answer

  • Styling problem

    Just a note: the multiple attribute of the select element is not specifically HTML5.

    The style will depend on the CSS styles that apply to both the user agent styles (default browser styles) and the specific CSS on this page. Try putting it on the page yourself (or in jsFiddle and see if you get the same style.

  • Problem of choice

    The selectedOptions property of the select element that you get will contain an array of HTMLOptionElement s, all of which have a value property. See below:

    jsFiddle

  function bdone(){ var selectElem = document.getElementsByTagName('select')[0] var mesOptions = selectElem.selectedOptions; for(var a=0;a<mesOptions.length;a++) { alert(mesOptions[a].value); } }
+4
source

More articles:


All Articles