如何在选择选项上使用鼠标和箭头键？

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

试试这个，首先：代码将在你有一个未使用的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 2

将 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/

Answer 3

您需要在更改列表时调用函数。

<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>