4

HTML5を初めて使用し、GoogleChromeのフォームで<select>属性を使用してテストしようとしています。multiple私は2つの問題に遭遇します。

  1. まず、オプションリストが醜い長方形に変わります

    複数の属性を持つ醜い長方形

    以前は「正常」でしたが、

  2. 私の2番目の問題は、selectの値を取得したい場合（ボタンをクリックして、javascriptを使用したコードで）、1つだけが与えられているようです...

これが私のコードです：

<!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属性は特にHTML5ではありません。select

    スタイリングは、適用されている CSS スタイル、ユーザー エージェント スタイル (デフォルトのブラウザー スタイル)、およびそのページの特定の CSS の両方に依存します。単独でページに (またはjsFiddleに) 配置して、同じスタイルになるかどうかを確認してください。

  2. 選択の問題

    取得した要素のselectedOptionsプロパティにはselectの配列が含まれ、HTMLOptionElementそのすべてが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);
        }
    }
于 2013-03-16T18:33:03.353 に答える