onclick on option tag не работает в IE и chrome

я использую onclick событие в теге option для select box 

<select>
    <option onclick="check()">one</option>
    <option onclick="check()">two</option>
    <option onclick="check()">three</option>
</select>`

onclick событие не работает в IE и Chrome, но оно отлично работает в firefox, здесь я не хочу использовать onchange событие на select tag bcz оно не вызовет событие, если пользователь снова выберет ту же опцию

например: скажем, первый раз, когда пользователь выбирает" один " раскрывающийся список, я открою всплывающее окно После обработки некоторых вещей, пользователь закрывает всплывающее окно,предположим, если пользователь хочет выбрать тот же "один" раскрывающийся список это не вызовет никакого события.это можно решить с помощью события onclick на теге опции, но он не работает на IE и chrome

есть ли решения для этого ?

23
html html-select

6 ответов

onclick событие on option тег не будет работать на большинстве версий IE, Safari и Chrome:ссылка

если вы хотите вызвать событие, когда пользователь выбирает, почему бы просто не использовать:

<select onclick="check()">
<option>one</option>
<option>two</option>
<option>three</option>

и если вы хотите что-то сделать с конкретной выбранной опции пользователя:

<select onclick="if (typeof(this.selectedIndex) != 'undefined') check(this.selectedIndex)">
<option>one</option>
<option>two</option>
<option>three</option>

таким образом, Вы гарантированно назвать check() если и только если выбрана опция.

Edit: как @user422543 указал в комментариях, это решение не будет работать в Firefox. Поэтому я задал здесь другой вопрос:--21-->почему Firefox реагирует иначе, чем Webkit и IE, на событие "click" в теге "select"?

пока кажется, что с помощью <select> tag is не будет работать последовательно во всех браузерах. Однако, если мы имитируем меню выбора, используя библиотеку, такую как jQuery UI выберите меню или выбрал чтобы создать меню выбора вместо использования <select> tag,click мероприятие будет стреляли по <ul> или <li> тег, который совместим во всех браузерах, которые я тестировал.

36

У меня другое предложение, это не 100%, но почти:

<select onchange="valueChanged(this.value); this.selectedindex = -1">
    <option style="display: none"></option>
    <option value="1"> 1 </option>
    <option value="2"> 2 </option>
    <option value="3"> 3 </option>
    <option value="4"> 4 </option>
</select>

таким образом, событие будет инициировано, даже если пользователь дважды выбрал один и тот же параметр. Загвоздка в том, что IE отобразит пустую опцию (она игнорирует атрибут style), но нажатие на нее не приведет к запуску события, так как оно всегда начинается как выбранное, и поэтому выбор его не вызывает onchange...

3

Это эмулирует onclick на options путем записи количества кликов.

http://jsfiddle.net/yT6Y5/1/

  • первый щелчок игнорируется (используется для расширения раскрывающегося списка),
  • второй щелчок-это фактически ваш "выбор". (Затем счетчик щелчков сбрасывается).

он не обслуживает взаимодействие с клавиатурой, хотя....

О, и я использую JQuery, но вы можете повторно сделать это, используя pure js

2

вы просто

  • поместите скрипт над select,
  • установить onclick и onblur для выбора, как показано в коде
  • и настроить функцию проверки.

я испытывал его и он работает :).

<script>
    selectHandler = {
        clickCount : 0,
        action : function(select)
        {
            selectHandler.clickCount++;
            if(selectHandler.clickCount%2 == 0)
            {
                selectedValue = select.options[select.selectedIndex].value;
                selectHandler.check(selectedValue);
            }
        },
        blur : function() // needed for proper behaviour
        {
            if(selectHandler.clickCount%2 != 0)
            {
                selectHandler.clickCount--;
            }
        },
        check : function(value)
        {
            // you can customize this
            alert('Changed! -> ' + value);
        }
    }

</script>
<select onclick="selectHandler.action(this)" onblur="selectHandler.blur()">
    <option value="value-1"> 1 </option>
    <option value="value-2"> 2 </option>
    <option value="value-3"> 3 </option>
    <option value="value-4"> 4 </option>
</select>
0

Я обнаружил, что для меня работает следующее-вместо использования по щелчку, используйте при изменении, например:

jQuery('#element select').on('change',  (function() {

   //your code here

}));
0

использовать function(this) в идентификаторе select tag 

<script type="application/javascript">

var timesSelectClicked = 0;

$(function() {
    $(document).on('click keypress', 'select', function (e) {
        if (timesSelectClicked == 0)
        {
            timesSelectClicked += 1;
        }
        else if (timesSelectClicked == 1)
        {
            timesSelectClicked = 0;
            prompt($('select option:selected').text());
        }
    });
});
</script>
0