Javascript 在HTML5中选择多个_Javascript_Html_Forms

Javascript 在HTML5中选择多个

javascript html forms

Javascript 在HTML5中选择多个,javascript,html,forms,Javascript,Html,Forms,我是HTML5新手，我正试图在谷歌Chrome上测试表单中的多属性。我遇到两个问题首先，选项列表在一个丑陋的矩形中更改而在正常情况下：我的第二个问题是，当我想通过点击按钮获得select的值时，在使用javascript的代码中，似乎只给出了一个值这是我的密码： <!DOCTYPE html> <html> <body> How do you travel? <form method="get" id=myForm" onsubmit="do

我是HTML5新手，我正试图在谷歌Chrome上测试表单中的多属性。我遇到两个问题

首先，选项列表在一个丑陋的矩形中更改

而在正常情况下：

我的第二个问题是，当我想通过点击按钮获得select的值时，在使用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>

谢谢你读我的书

造型问题

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

样式将取决于所应用的CSS样式、用户代理样式、默认浏览器样式以及该页面上的特定CSS。试着把它放在一个单独的页面或一个单独的页面中，看看你是否得到相同的样式

甄选问题

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

我知道multiple对文件输入的支持有限，但我从来没有听说过MSIE在选择元素时会出现问题。嗯，我一定是这么想的。我把它从我的答案中删除了。谢谢@Quentin@Pao：哪一期？设计样式还是获取值？@Pao：我在回答中添加了一个选项，向您展示它是如何工作的。您是否熟悉JavaScript控制台以查看调试消息？您可以使用console.logmsg或console.dirmsg向控制台写入行，而不是使用alertmsg。大多数浏览器都有devtools，您可以在其中查看控制台。试着按F12键。丑陋是主观的，但用户界面的变化是你不得不忍受的。没有一个标准的UI小部件可以从下拉菜单中选择多个项目。ListBox样式的小部件是标准的。使用它的另一种选择是构建自己的UI小部件，用户不会使用其他元素和JavaScript识别它。对于问题1，它看起来是这样的，因为您在标记中包含了多个属性。现在，如果你不想让它有滚动条，你可以添加属性大小，例如：我的第二个问题是两个问题。

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