4

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

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

    具有多个属性的丑陋矩形

    而之前它是“正常的”：

  2. 我的第二个问题是，似乎当我想获取选择的值时（通过单击按钮并在使用 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>

谢谢你读我！

4

1 回答 1

5

  1. 造型问题

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

    样式将取决于正在应用的 CSS 样式，包括用户代理样式（默认浏览器样式）和该页面上的特定 CSS。尝试将其单独放在页面中（或放在jsFiddle中，看看是否获得相同的样式。

  2. 选择题

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

    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);
        }
    }
于 2013-03-16T18:33:03.353 回答