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在大多数浏览器上都不起作用（或者可能都不适用），而是可以根据其value属性监听select和switch的change事件。

你可以这样做：

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

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

<强> Demo

Answer 2

对于onClick选项可能无法正常工作。所以最好在select标签中放置onChange函数，并传递所选子项的值。

Answer 3

您应该在select元素上使用onChange事件，如：

<select onChange="ship(this.selectedIndex, this.options[this.selectedIndex].value);

在这种情况下，ship函数获取索引和所选选项的值。所以在你的情况下将选项更改为

 <option value="<?php echo $pos; ?>">1</option>

也可能需要

。编辑：只有一半的问题。请参阅PSL答案以获得更好的解决方案：）

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

3 个答案: