select multiple in HTML5

forms, html, javascript

Solution

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 `HTMLOptionElement`s, 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);
        }
    }

Problem

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!

Original source