select multiple in HTML5

Question

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

Firstly, the options list changes in an ugly rectangle

Whereas before it was "normal":
My second problem is that, it seems that when i want to get the values of the select (by clicking on the button and in the code using javascript), only one is given...

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>

Thank you for reading me!

"Ugly" is subjective, but the change in UI is something you have to live with. There isn't a standard UI widget which provides a way to select multiple items from a drop down menu. The ListBox style widget is the standard. (The alternative to living with it is to build you own UI widget (which won't be recognised by users) out of other elements and JavaScript.) — Quentin
– Quentin, Commented Mar 18, 2013 at 7:35
To your question #1 it appears like that because you included the multiple attribute in your <select> tag. Now if you don't want it to have the scrollbars, you can just add the attribute size eg: <select multiple size="7"> — lozadaOmr
– lozadaOmr, Commented Mar 12, 2014 at 13:23

Aaron Blenkush · Accepted Answer · 2013-03-18 17:32:38Z

5

The Styling Issue

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

The styling is going to depend on the CSS styles that are being applied, both the user agent styles (the default browser styles), and the specific CSS on that page. Try putting it in a page by itself (or in a jsFiddle and see if you get the same styling.
The selection issue

The selectedOptions property of the select element you get will contain an array of HTMLOptionElements, all of which have the 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);
        }
    }

edited Mar 18, 2013 at 17:32

answered Mar 16, 2013 at 18:33

Aaron Blenkush

3,0592 gold badges30 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Quentin Over a year ago

I know multiple has limited support for file inputs, but I've never heard of MSIE having issues with it on select elements.

Aaron Blenkush Over a year ago

Hmm, that must have been what I was thinking. I removed it from my answer. Thanks @Quentin.

Aaron Blenkush Over a year ago

@Pao: Which issue? Styling or getting the values?

Aaron Blenkush Over a year ago

@Pao: I've added a Fiddle to my answer to show you how it works. Are you familiar with the JavaScript console, to see debug messages? Instead of using alert(msg) you can use console.log(msg) or console.dir(msg) to write lines to the console. Most browsers have devtools where you can view the console. Try pressing F12.

Collectives™ on Stack Overflow

select multiple in HTML5

1 Answer 1

jsFiddle

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related