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

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

试试这个，第一：代码将工作onchange第二，你必须在代码中未使用的4位

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

绑定选择元素作为一个事件：

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/