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

Question

When I put onClick into <select>, script work, but When I put it into option it's not working!

Here is HTML select script:

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

And here is 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 on an option doesn't work on most browsers (or probably none of them), Instead you can just listen to the change event of the select and switch based on its value property.

You could just do:

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

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

Demo