将 javascript 函数绑定到 <select> 的选项答案

【问题标题】：bind javascript function to options of <select>将 javascript 函数绑定到 <select> 的选项
【发布时间】：2015-03-07 20:38:28
【问题描述】：

我想做这样的事情：

<select>
    <option> escapeXml("Black") </option>
    <option> doFunction("Brown") </option>
    <option> doOtherFunction("Red") </option>
</select>

我将如何实现这一目标？

谢谢。

【问题讨论】：

你会在 select 元素上监听 change 事件，然后检查所选选项的值，并调用相应的函数
让我明白你不会用加载选项填充选择字段......使用javascript？或者你不能为每个选项调用不同的函数？还是两者兼而有之？

标签： javascript list option

【解决方案1】：

执行此操作的简单方法是为 onChange 或 onBlur 调用单个 javaScript 函数。获取该Js函数中选择的值。

使用 if..else 循环根据值调用其他函数。

【讨论】：

【解决方案2】：

因为您需要为每个选项使用不同的功能...

...我会这样做：

<script type="text/javascript">
function myFunction(select){
    var value = select.options[select.selectedIndex].value;
    switch(value){
        case "Black": escapeXml("Black"); break;
        case "Brown": doFunction("Brown"); break;
        case "Red": doOtherFunction("Red"); break;
        default: return;
    }
}
</script>

<select id="mySelect" onchange="myFunction(this)">
    <option value="Black"> Black </option>
    <option value="Brown"> Brown </option>
    <option value="Red"> Red </option>
</select>

您可以在加载时调用它：

window.addEventListener("load",function(){
    myFunction(document.getElementById("mySelect"));
},false);

【讨论】：