javascript - 无法更改 <option> 中的背景颜色

Question

当我输入 onClick进入<select> ，脚本工作，但是当我把它放入 option它不起作用!

这是 HTML select脚本:

            <select name="<?php echo $pos; ?>" id="<?php echo $pos; ?>">
                <option value="0">0</option>
                <option onClick="ship('1','<?php echo $pos; ?>');" value="1">1</option>
                <option onClick="ship('2','<?php echo $pos; ?>');" value="2">2</option>
                <option onClick="ship('3','<?php echo $pos; ?>');" value="3">3</option>
                <option onClick="ship('4','<?php echo $pos; ?>');" value="4">4</option>
            </select>

这是 JavaScript:

<script>
    function ship(num, pos) {
        if (num == 0){
            document.getElementById(pos).style.backgroundColor="white";
        }
        if (num == 1){
            document.getElementById(pos).style.backgroundColor="red";
        }
        if (num == 2){
            document.getElementById(pos).style.backgroundColor="green";
        }
        if (num == 3){
            document.getElementById(pos).style.backgroundColor="blue";
        }
        if (num == 4){
            document.getElementById(pos).style.backgroundColor="yellow";
        }



    }

</script>

Answer 1

onclick 选项在大多数浏览器上不起作用(或者可能没有)，相反，您可以根据其 值监听选择和切换的更改事件 属性。

你可以这样做:

var color = [
    "white",
    "red",
    "green",
    "blue",
    "yellow"];

window.onload = function () {
    document.getElementById('selectId').onchange = function () {
        this.style.backgroundColor = color[this.value];
    }
}

Demo