Есть ли событие onSelect или эквивалент для HTML <select>?

У меня есть форма ввода, которая позволяет мне выбирать из нескольких параметров и делать что-то, когда пользователь меняет выбор. Например,

<select onChange="javascript:doSomething();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Теперь doSomething() запускается только при изменении выбора.

Я хочу вызвать doSomething(), когда пользователь снова выберет любую опцию, возможно, одну и ту же.

Я попытался использовать обработчик onClick, но он запускается до того, как пользователь запустит процесс выбора.

Итак, есть ли способ вызвать функцию при каждом выборе пользователем?

Update:

Ответ, предложенный Даррилом, как представляется, работал, но он не работает последовательно. Иногда событие запускается, как только пользователь щелкает раскрывающееся меню, даже до того, как пользователь завершит процесс выбора!

ОТВЕТЫ

Ответ 1

Вот простейший способ:

<select name="ab" onchange="if (this.selectedIndex) doSomething();">
    <option value="-1">--</option>
    <option value="1">option 1</option> 
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

Работает как с выбором мыши, так и с клавиатурой Клавиши "Вверх" / "Вниз", когда выбран фокус.

Ответ 2

Мне нужно что-то точно такое же. Это то, что сработало для меня:

<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Ответ 3

У меня была такая же проблема, когда я создавал дизайн несколько месяцев назад. Решение, которое я нашел, состояло в использовании .live("change", function()) в комбинации с .blur() на используемом вами элементе.

Если вы хотите, чтобы он что-то делал, когда пользователь просто щелкает, вместо изменения просто замените change на click.

Я назначил свой раскрывающийся список идентификатором selected и использовал следующее:

$(function () {
    $("#selected").live("change", function () {

    // do whatever you need to do

    // you want the element to lose focus immediately
    // this is key to get this working.
    $('#selected').blur();
    });
});

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

http://api.jquery.com/live/

Изменить: используйте селектор on, а не .live. См. jQuery.on()

Ответ 4

Просто идея, но можно ли поместить onclick на каждый из элементов <option>?

<select>
  <option onclick="doSomething(this);">A</option>
  <option onclick="doSomething(this);">B</option>
  <option onclick="doSomething(this);">C</option>
</select>

Другим вариантом может быть использование onblur при выборе. Это будет срабатывать в любое время, когда пользователь нажимает кнопку выбора. На этом этапе вы можете определить, какой вариант был выбран. Чтобы включить этот триггер в правильное время, onclick опции может размыть поле (сделать что-то еще активным или просто .blur() в jQuery).

Ответ 5

Подход onclick не совсем плох, но, как сказано, он не будет запущен, когда значение не будет изменено щелчком мыши.
Однако можно активировать событие onclick в событии onchange.

<select onchange="{doSomething(...);if(this.options[this.selectedIndex].onclick != null){this.options[this.selectedIndex].onclick(this);}}">
    <option onclick="doSomethingElse(...);" value="A">A</option>
    <option onclick="doSomethingElse(..);" value="B">B</option>
    <option onclick="doSomethingElse(..);" value="Foo">C</option>
</select>

Ответ 6

Если вам действительно нужно, чтобы это было так, я бы сделал это (чтобы обеспечить его работу с помощью клавиатуры и мыши)

  • Добавить обработчик события onfocus для выбора для установки "текущего" значения
  • Добавить обработчик события onclick для выбора для обработки изменений мыши.
  • Добавить обработчик события onkeypress для выбора для изменения клавиатуры.

К сожалению, onclick будет выполняться несколько раз (например, при нажатии на выбор... и при выборе/закрытии), а onkeypress может срабатывать, когда ничего не меняется...

<script>
  function setInitial(obj){
    obj._initValue = obj.value;
  }
  function doSomething(obj){
    //if you want to verify a change took place...
    if(obj._initValue == obj.value){
      //do nothing, no actual change occurred...
      //or in your case if you want to make a minor update
      doMinorUpdate();
    } else {
      //change happened
      getNewData(obj.value);
    }
  }
</script>


<select onfocus="setInitial(this);" onclick="doSomething();" onkeypress="doSomething();">
  ...
</select>

Ответ 7

Чтобы правильно запускать событие каждый раз, когда пользователь выбирает что-либо (даже тот же параметр), вам просто нужно обмануть поле выбора.

Как и другие, укажите отрицательный selectedIndex на фокусе, чтобы заставить событие изменения. Хотя это позволяет вам обмануть поле выбора, после этого он не будет работать, пока он все еще имеет фокус. Простое исправление - заставить окно выбора размыться, как показано ниже.

Стандарт JS/HTML:

<select onchange="myCallback();" onfocus="this.selectedIndex=-1;this.blur();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Плагин jQuery:

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script type="text/javascript">
    $.fn.alwaysChange = function(callback) {
        return this.each(function(){
            var elem = this;
            var $this = $(this);

            $this.change(function(){
                if(callback) callback($this.val());
            }).focus(function(){
                elem.selectedIndex = -1;
                elem.blur();
            });
        });
    }


    $('select').alwaysChange(function(val){
        // Optional change event callback,
        //    shorthand for $('select').alwaysChange().change(function(){});
    });
</script>

Здесь вы можете увидеть рабочую демонстрацию.

Ответ 8

Продолжаем расширять ответ на jitbit. Я обнаружил, что это странно, когда вы щелкнули вниз, а затем щелкнули вниз, не выбирая ничего. Закончилось что-то вроде:

var lastSelectedOption = null;

DDChange = function(Dd) {
  //Blur after change so that clicking again without 
  //losing focus re-triggers onfocus.
  Dd.blur();

  //The rest is whatever you want in the change.
  var tcs = $("span.on_change_times");
  tcs.html(+tcs.html() + 1);
  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

DDFocus = function(Dd) {
  lastSelectedOption = Dd.prop("selectedIndex");
  Dd.prop("selectedIndex", -1);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

//On blur, set it back to the value before they clicked 
//away without selecting an option.
//
//This is what is typically weird for the user since they 
//might click on the dropdown to look at other options,
//realize they didn't what to change anything, and 
//click off the dropdown.
DDBlur = function(Dd) {
  if (Dd.prop("selectedIndex") === -1)
    Dd.prop("selectedIndex", lastSelectedOption);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
}; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="Dd" onchange="DDChange($(this));" onfocus="DDFocus($(this));" onblur="DDBlur($(this));">
  <option>1</option>
  <option>2</option>
</select>
<br/>
<br/>Selected index: <span class="selected_index"></span>
<br/>Times onchange triggered: <span class="on_change_times">0</span>

Ответ 9

На самом деле, события onclick НЕ запускаются, когда пользователь использует клавиатуру для изменения выбора в элементе управления select. Возможно, вам придется использовать комбинацию onChange и onClick, чтобы получить поведение, которое вы ищете.

Ответ 10

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

Ответ 11

Итак, моя цель состояла в том, чтобы иметь возможность выбирать одно и то же значение несколько раз, что по существу перезаписывает функцию onchange() и превращает его в полезный метод onclick().

Основываясь на приведенных выше предложениях, я придумал это, что работает для меня.

<select name="ab" id="hi" onchange="if (typeof(this.selectedIndex) != undefined) {alert($('#hi').val()); this.blur();}" onfocus="this.selectedIndex = -1;">
    <option value="-1">--</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

http://jsfiddle.net/dR9tH/19/

Ответ 12

Здесь мое решение, совершенно другое для любого другого здесь. Он использует положение мыши, чтобы выяснить, был ли нажат какой-либо вариант, если вы не хотите щелкнуть по полю выбора, чтобы открыть раскрывающийся список. Он использует позицию event.screenY, поскольку это единственная надежная переменная перекрестного браузера. Сначала необходимо привязать событие зависания, чтобы он мог определить позицию элемента управления относительно экрана перед событием клика.

var select = $("select");

var screenDif = 0;
select.bind("hover", function (e) {
    screenDif = e.screenY - e.clientY;
});
select.bind("click", function (e) {
    var element = $(e.target);
    var eventHorizon = screenDif + element.offset().top + element.height() - $(window).scrollTop();
    if (e.screenY > eventHorizon)
        alert("option clicked");
});

Вот мой jsFiddle http://jsfiddle.net/sU7EV/4/

Ответ 13

попробуйте использовать option:selected

$("select option:selected").click(doSomething);

Ответ 14

Что работает для меня:

<select id='myID' onchange='doSomething();'>
    <option value='0' selected> Select Option </option>
    <option value='1' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > A </option>
    <option value='2' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > B </option>
</select>

Таким образом, onchange вызывает "doSomething()", когда опция изменяется, и onclick вызывает "doSomething()", когда событие onchange является ложным, другими словами, при выборе той же опции

Ответ 15

Попробуйте это (событие срабатывает точно при выборе опции без изменения опции):

$("select").mouseup(function() {
    var open = $(this).data("isopen");
    if(open) {
        alert('selected');
    }
    $(this).data("isopen", !open);
});

http://jsbin.com/dowoloka/4

Ответ 16

Прежде всего, вы используете onChange в качестве обработчика события, а затем используете переменную флагов, чтобы заставить ее выполнять функцию u каждый раз, когда вы делаете изменение

<select


var list = document.getElementById("list");
var flag = true ; 
list.onchange = function () {
if(flag){
document.bgColor ="red";
flag = false;

}else{
document.bgColor ="green";
flag = true;
}
}
<select id="list"> 
<option>op1</option>
<option>op2</option>
<option>op3</option>
</select>

Ответ 17

Замечательная вещь в теге select (в этом случае) заключается в том, что он будет захватывать свое значение из тегов параметров.

Try:

<select onChange="javascript:doSomething(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="Foo">C</option>
</select>

Работала прилично для меня.

Ответ 18

использовать jquery:

<select class="target">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script>
    $('.target').change(function() { doSomething(); });
</script>

Ответ 19

Я нашел это решение.

установите для выбранногоIndex элемента select значение 0 изначально

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

вызвать этот метод в событииChange

Ответ 20

Попробуйте следующее:

<select id="nameSelect" onfocus="javascript:document.getElementById('nameSelect').selectedIndex=-1;" onchange="doSomething(this);">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

Ответ 21

Долгое время назад, но в ответ на исходный вопрос, поможет ли это? Просто поместите onClick в строку SELECT. Затем поставьте то, что вы хотите, чтобы каждый OPTION выполнял строки OPTION. то есть:

<SELECT name="your name" onClick>
<option value ="Kilometres" onClick="YourFunction()">Kilometres
-------
-------
</SELECT>

Ответ 22

<select name="test[]" 
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

Ответ 23

Я столкнулся с подобной потребностью и в итоге написал директиву angularjs для того же самого -

guthub link - angular выберите

Используется element[0].blur();, чтобы удалить фокус с тега select. Логика запускает это размытие при втором щелчке раскрывающегося списка.

as-select запускается, даже когда пользователь выбирает одно и то же значение в раскрывающемся списке.

DEMO - ссылка

Ответ 24

Один True ответ - не использовать поле выбора (если вам нужно что-то сделать, когда вы повторно выбираете тот же ответ.)

Создайте выпадающее меню с помощью обычного меню div, кнопки, show/hide. Ссылка: https://www.w3schools.com/howto/howto_js_dropdown.asp

Можно было бы избежать, если бы кто-нибудь смог добавить прослушиватели событий к параметрам. Если на выбранном элементе был прослушиватель onSelect. И если нажатие на поле выбора не усугубляло бы увольнение mousedown, mouseup и щелкнуло все одновременно в mousedown.

Ответ 25

<script>
function abc(selectedguy) {
alert(selectedguy);
}
</script>

<select onchange="abc(this.selectedIndex);">
<option>option one</option>
<option>option two</option>
</select>

Здесь вы указали индекс, и в коде js вы можете использовать этот возврат с одним коммутатором или любым другим.

Ответ 26

Вы можете использовать onChange: http://www.w3schools.com/TAGS/tag_Select.asp

Скопировано из http://www.faqs.org/docs/htmltut/forms/_SELECT_onChange.html onChange обозначает JavaScript для запуска, когда пользователь выбирает один из параметров. Это означает, что действие инициируется немедленно, когда пользователь выбирает элемент, а не когда нажата кнопка "отправить".

Ответ 27

Обратите внимание, что обработчики событий не поддерживаются для тега OPTION в IE, с быстрым мышлением. Я придумал это решение, попробую его и дайте мне свой отзыв:

<script>
var flag = true;
function resetIndex(selObj) {
    if(flag) selObj.selectedIndex = -1;
    flag = true;
}
function doSomething(selObj) {
    alert(selObj.value)
    flag = false;
}
</script>
<select onchange="doSomething(this)" onclick="resetIndex(this)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

То, что я здесь делаю, - это сбросить индекс выбора, чтобы событие onchange всегда срабатывало, правда, что вы теряете выбранный элемент, когда вы нажимаете, и это может раздражать, если ваш список длинный, но он может помочь вы каким-то образом..

Ответ 28

как изменить значение выбора, когда элемент получает фокус, например (с помощью jquery):

$("#locationtype").focus(function() {
    $("#locationtype").val('');
});

$("#locationtype").change(function() {
    if($("#locationtype").val() == 1) {
        $(".bd #mapphp").addClass('show');
        $("#invoerform").addClass('hide');
    }
    if($("#locationtype").val() == 2) {
        $(".lat").val('');
        $(".lon").val('');
    }
});