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

时间:2015-03-07 20:38:28

标签: javascript list option

我想做类似的事情:

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

我将如何实现这一目标?

谢谢。

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

因为每个选项都需要不同的功能......

......我会这样做:

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