選択オプションでマウスと矢印キーを操作する方法は？

Question

キーを使用してオプションを変更すると、このコードで矢印キーを使用したいので、クラスをdivに追加して、背景色を変更する必要があります。

$(document).ready(function() { 
 
    $('option').hover(function() { 
 
     4 
 
     $('#colr').removeAttr('class'); 
 
     $('#colr').attr('class', ''); 
 
     $('#colr')[0].className = ''; 
 
     if ($(this).val() == 'red') { 
 
     $('#colr').addClass('red'); 
 
     } else if ($(this).val() == 'green') { 
 
     $('#colr').addClass('green'); 
 
     } else if ($(this).val() == 'blue') { 
 
     $('#colr').addClass('blue'); 
 
     } else { 
 
     $('#colr').addClass('black'); 
 
     } 
 
    }); 
 

 
    });

.red { 
 
    background-color: red; 
 
} 
 
.green { 
 
    background-color: green; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
} 
 
.black { 
 
    background-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div style="height:200px;width:200px" id='colr'></div> 
 
<select id="sel"> 
 

 
    <option class="d" value="red">red</option> 
 
    <option value="green" selected="selected">green</option> 
 
    <option class="d" value="blue">blue</option> 
 
    <option class="d" value="black">black</option> 
 

 
</select>

Answer 1

あなたはあなたのリストの変更に関数を呼び出す必要があります。

<select id="sel" onchange="jsFunc()"> 
    <option class="d" value="red">red</option> 
    <option value="green" selected="selected">green</option> 
    <option class="d" value="blue">blue</option> 
    <option class="d" value="black">black</option> 
</select> 

<script> 
    function jsFunc() 
    { 
     //do your stuff 
    } 
</script> 

Answer 2

まず、これを試してみてください：コードを使用すると、コード内の未使用4数字を持っていたonchange第二に動作します

$(document).ready(function() { 
 
    $('#sel').on('change',function() { 
 
     $('#colr').removeAttr('class'); 
 
     $('#colr').attr('class', ''); 
 
     $('#colr')[0].className = ''; 
 
     if ($(this).val() == 'red') { 
 
     $('#colr').addClass('red'); 
 
     } else if ($(this).val() == 'green') { 
 
     $('#colr').addClass('green'); 
 
     } else if ($(this).val() == 'blue') { 
 
     $('#colr').addClass('blue'); 
 
     } else { 
 
     $('#colr').addClass('black'); 
 
     } 
 
    }); 
 

 
    });

.red { 
 
    background-color: red; 
 
} 
 
.green { 
 
    background-color: green; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
} 
 
.black { 
 
    background-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div style="height:200px;width:200px" id='colr'>Div</div> 
 
<select id="sel"> 
 
    <option class="d" value="red">red</option> 
 
    <option value="green" selected="selected">green</option> 
 
    <option class="d" value="blue">blue</option> 
 
    <option class="d" value="black">black</option> 
 
</select>

Answer 3

バインドとしてselect要素のイベント：

javascript： -

document.getElementById("id").onchange = function() {//your code that changes the background}; 

リンク： - https://jsfiddle.net/z7t8m0oy/

jqueryの： -

$("#id").change(function() {//your code that changes the background}); 

リンク： - https://jsfiddle.net/z7t8m0oy/1/