Вопрос по javascript – Javascript запустить функцию на

0

Есть ли способ выполнить функцию JavaScript, когда пользователь нажимает на определенный<option> в пределах<select> выпадающее меню?

Возможный дубликатClick on option event Mohammad

Ваш Ответ

6   ответов
0

Используйте 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');
}
​

Вы даже можете выполнить новую функцию JavaScript с<option> Смотреть в действии:http://jsfiddle.net/extremerose71/PnfCk/8/

Наслаждаться!...

0

Вам нужно зацепитьonchange событие<select> элемент, и проверьте значение. Вы пробовали это?

3

<select> элементы поддерживаютonchange событие.

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

1

Вы можете использоватьchange событие, чтобы проверить, какой вариант пользователь щелкнул, а затем выполнить нужный код.

В Jquery:

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

    if (item === "Specified Choice")
    {
        //do your stuff here
    }
});
Я это понимаю, и раньше я тоже был парнем не из Jquery. Но прошло много времени с тех пор, как я использовал Jquery, и, честно говоря, я больше не знал бы, как это сделать в vanilla JS.
Похоже, когда кто-то специально не спрашивает ответ JQuery, что это лучше, чтобы ответить в целом JavaScript. Конечно, я говорю только потому, что я не тот, кого вы называете парнем-любителем.
1

Вот:

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

гдеelem это ваш элемент SELECT.

Live demo: http://jsfiddle.net/vBB7a/

не работает для Chrome (v42).
@Dwellee Похоже на ошибку Chrome. Я сообщу об этом.
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() ) and you would use that function to test for each case.

Похожие вопросы