在 HTML5 中选择多个

Question

在 HTML5 中选择多个

我是 HTML5 的新手，我正在尝试<select>使用multipleGoogle Chrome 上表单中的属性进行测试。我遇到两个问题。

首先，选项列表在一个丑陋的矩形中发生变化

而在它之前是“正常的”：
我的第二个问题是，似乎当我想获取选择的值（通过单击按钮并在使用 javascript 的代码中）时，只给出了一个...

这是我的代码：

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

Run Code Online (Sandbox Code Playgroud)

谢谢你阅读我！

Answer 1

Aar*_*ush 5

造型问题

请注意：元素的multiple属性select不是专门的HTML5。

样式将取决于正在应用的 CSS 样式，用户代理样式（默认浏览器样式）和该页面上的特定 CSS。尝试将它单独放在一个页面中（或放在jsFiddle 中，看看你是否得到了相同的样式。
选择题

你得到selectedOptions的select元素的属性将包含一个HTMLOptionElements的数组，所有这些都具有该value属性。见下文：

js小提琴

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

Run Code Online (Sandbox Code Playgroud)

我知道 `multiple` 对文件输入的支持有限，但我从来没有听说过 MSIE 在 `select` 元素上有问题。 (3认同)

归档时间：	12 年，8 月前
查看次数：	8338 次
最近记录：	12 年，8 月前

在 HTML5 中选择多个

js小提琴