Question

当用户点击<option>下拉菜单中的某个<select>时，有没有办法执行javascript功能？

Answer 1

<select>个元素支持onchange事件。

http://w3schools.com/jsref/event_onchange.asp

Answer 2

你的HTML看起来像这样：

<select onchange="functionName(this.value)">
    <option value="1"> 1 </option>
    <option value="2"> 2 </option>
    <option value="3"> 3 </option>
</select>

在JavaScript中，您将拥有一个功能（例如：functionName()）并且您将使用该函数来测试每个案例。

Answer 3

您可以使用change事件检查用户点击的选项，然后执行所需的代码。

在Jquery中：

$('#yourSelect').change(function(){
    var item = $(this).val();

    if (item === "Specified Choice")
    {
        //do your stuff here
    }
});

Answer 4

下面：

elem.onclick = function ( e ) {
    if ( e.target.tagName.toLowerCase() === 'option' ) {
        // an <option> element was clicked
        // do your thing
    }
};

其中elem是您的SELECT元素。

现场演示： http://jsfiddle.net/vBB7a/

Answer 5

您需要挂钩onchange元素的<select>事件，并检查值。你试过了吗？

Answer 6

在<option>内，你可以使用onclick事件来指定要执行的javascript函数。

E.g。

<option onclick="yourFunction()">

Answer 7

在项目中使用Jquery ..

HTML代码：

<select id="myselect">
    <option value="">Select</option>
    <option value="1">StactOverFlow</option>
    <option value="2">SuperUser</option>
    <option value="3">Another 1</option>
    <option value="4">Another 2</option>
    <option value="5">Another 3</option>
</select>

JQuery代码：

$("#myselect").bind('change', function(){
    switch($(this).val()){
        case "1":
            click_action_1();
            break;

        case "2":
            click_action_2();
            break;

        case "3":
            click_action_3();
            break;
    }
});

function click_action_1(){
    alert('Hi 1');
}         

function click_action_2(){
    alert('Hi 2');
}      

function click_action_3(){
    alert('Hi 3');
}

您甚至可以使用<option>执行新的JavaScript功能观看行动：http://jsfiddle.net/extremerose71/PnfCk/8/

享受！...

Javascript运行功能在<option>上单击</option>

7 个答案: