如何使用鼠標和箭頭鍵選擇選項？

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/