Onclick on option tag не работает на IE и хром

Я использую событие onclick в теге параметра для поля select

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

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

Например: первый раз пользователь выбирает "одно" раскрывающееся меню. Я открою всплывающее окно после обработки некоторого материала, который пользователь закрывает всплывающее окно, предположим, что если пользователь хочет выбрать один и тот же "один" выпадающий, это не вызовет какого-либо события. Это можно решить используя onclick event on tag, но не работает на IE и chrome

Есть ли какая-нибудь работа для этого?

Ответы

Ответ 1

Событие onclick для тега 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() тогда и только тогда, когда выбран вариант.

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

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

Ответ 2

У меня есть другое предложение, это не 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 покажет пустую опцию (она игнорирует атрибут стиля), но нажатие на нее не будет запускать событие, так как оно всегда начинается как выбранное, и поэтому выбор его не вызывает onchange...

Ответ 3

Это эмулирует событие onclick на вашем option, записывая количество кликов.

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

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

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

О, и я использую JQuery, но вы можете сделать это с помощью чистого JS

Ответ 4

Вам просто нужно

  • поставьте script над выбором,
  • установите 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>

Ответ 5

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

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

   //your code here

}));

Ответ 6

Используйте function(this) в id тега select

например

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

Ответ 7

Этот код не работает в Google Chrome, но работает в Mozilla.

<select>
    <option value="2" (click)="myFunction($event)">
     <div>2</div>
    </option>

    <option value="5" (click)="myFunction($event)">
     <div>5</div>
    </option>

   <option value="10" (click)="myFunction($event)">
    <div>10</div>
  </option>

</select>

Это решение работает в Chrome и Mozilla. Я не тестировал в Safari.;

<select (change)="myFunction($event)">
    <option value="2">
     <div>2</div>
    </option>

    <option value="5">
     <div>5</div>
    </option>

   <option value="10">
    <div>10</div>
  </option>

</select>