1

あなたの助けが必要です、

次のことについてどうすればよいかわかりません。

最初の選択ボックスに緑色を選択した場合、選択したオプションを2番目の選択ボックスに自動的に選択する必要があります。

JavaScriptだけを使用してこれをどのように達成しますか。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span>Category:</span>
<br>
<select id="select1">
    <option value=""></option>
    <option value="RED">RED</option>
    <option value="BLUE">BLUE</option>
    <option value="GREEN">GREEN</option>
    <option value="YELLOW">YELLOW</option>
</select>
<br>
<span>Your selection was:</span>
<br>
<select id="select2">
    <option value=""></option>
    <option value="RED">RED</option>
    <option value="BLUE">BLUE/option>
    <option value="GREEN">GREEN</option>
    <option value="YELLOW">YELLOW</option>
</select><b></b>
</body>
</html>
4

3 に答える 3

1

同じ値が見つかるまで、オプションを反復できます。

document.getElementById("select1").onchange = function() {
    var selected = this.value;
    var select2 = document.getElementById("select2");

    //find the index in the second select
    for (var i = 0; i < select2.options.length; i++) {
        if (select2.options[i].value == selected) {
            select2.options[i].selected = true;
        }
    }
}

デモ: http://jsfiddle.net/HJm7E/

于 2013-07-26T14:11:45.727 に答える
0

2 つの選択タグに同じオプションがある場合:

var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');

select1.addEventListener('change', function(){
    select2.selectedIndex = this.selectedIndex;
});

フィドル

この単純な解決策は、異なるオプションを持つ選択では間違っていることに注意してください。この場合、これは機能します：

select1.addEventListener('change', function(){
    for(var i = 0; i < select2.options.length; i++){
        if(select2.options[i].value === this.options[this.selectedIndex].value)
            select2.options[i].selected = true;
    }
});

更新されたフィドル

于 2013-07-26T14:08:28.323 に答える
0 
<!DOCTYPE html>
<html>
<head>
    <script>
        function doOnload() {
            var slt1 = document.getElementById("select1");
            var slt2 = document.getElementById("select2");
            slt1.onchange = function() {
                slt2.options[slt1.selectedIndex].selected = true;
            };
        }
    </script>
</head>
<body onload="doOnload()">
    <span>Category:</span>
    <br>
    <select id="select1">
        <option value=""></option>
        <option value="RED">RED</option>
        <option value="BLUE">GREEN</option>
        <option value="GREEN">GREEN</option>
        <option value="YELLOW">YELLOW</option>
    </select>
    <br>
    <span>Your selection was:</span>
    <br>
    <select id="select2">
        <option value=""></option>
        <option value="RED">RED</option>
        <option value="BLUE">GREEN</option>
        <option value="GREEN">GREEN</option>
        <option value="YELLOW">YELLOW</option>
    </select><b></b>
</body>

于 2013-07-26T14:12:48.820 に答える