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

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

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

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

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

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

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

Обновить:

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

Вот самый простой способ:

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

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

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

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

Поддерживает это:

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

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

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

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

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

Подход 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>

Собираюсь расширить ответ 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>

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

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

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

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

К сожалению, onclick будет запускаться несколько раз (например, при закрытии select ... и при выборе / закрытии), а 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>

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

Как уже говорили другие, укажите отрицательный 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>

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

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

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

Я решил сделать что - то простое , чем взлом альтернатив для onChange()использования других событий , которые не были на самом деле предназначены для этой цели ( blur, clickи т.д.)

Как я это решил:

Просто предварительно ожидайте тег-опцию-заполнитель, например select, который не имеет значения.

Таким образом, вместо использования следующей структуры, которая требует хакерских альтернатив:

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

Рассмотрите возможность использования этого:

<select>
  <option selected="selected">Select...</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Таким образом, ваш код намного упрощен и onChangeбудет работать, как и ожидалось, каждый раз, когда пользователь решает выбрать что-то отличное от значения по умолчанию. Вы даже можете добавить disabledатрибут к первому параметру, если не хотите, чтобы они выбирали его снова и заставляли выбирать что-либо из параметров, таким образом вызываяonChange() пожар.

Во время ответа я пишу сложное приложение Vue и обнаружил, что этот выбор дизайна значительно упростил мой код. Я потратил часы на эту проблему, прежде чем освоился с этим решением, и мне не пришлось переписывать много кода. Однако, если бы я использовал альтернативные варианты, мне пришлось бы учитывать крайние случаи, предотвращать двойное срабатывание запросов ajax и т. Д. Это также не портит поведение браузера по умолчанию в качестве приятного бонуса (протестировано на мобильных устройствах). браузеры также).

Иногда вам просто нужно сделать шаг назад и подумать над общей картиной для самого простого решения.

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

Поэтому моя цель состояла в том, чтобы иметь возможность выбрать одно и то же значение несколько раз, что по существу перезаписывает функцию 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/

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

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

Добавьте дополнительную опцию в качестве первой, например, заголовок столбца, который будет значением по умолчанию для раскрывающейся кнопки до ее щелчка и сброса в конце doSomething(), поэтому при выборе A / B / C событие onchange всегда срабатывает, когда выбор сделан State, ничего не делай и возвращайся. onclickочень нестабильно, как многие люди упоминали ранее. Поэтому все, что нам нужно сделать, это сделать начальную метку кнопки, которая отличается от ваших истинных опций, чтобы onchange работал с любой опцией.

<select id="btnState" onchange="doSomething(this)">
  <option value="State" selected="selected">State</option>  
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>


function doSomething(obj)
{
    var btnValue = obj.options[obj.selectedIndex].value;

    if (btnValue == "State")
    {
      //do nothing
      return;
    }

    // Do your thing here

    // reset 
    obj.selectedIndex = 0;
}

Замечательная вещь в теге select (в этом сценарии) заключается в том, что он извлекает свое значение из тегов option.

Пытаться:

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

Работал достойно для меня.

используйте jquery:

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

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

Вот мое решение, совершенно отличное от любого другого здесь. Он использует положение мыши, чтобы выяснить, был ли выбран вариант, а не щелкнуть поле выбора, чтобы открыть раскрывающийся список. Он использует позицию 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/

вы должны попробовать использовать option:selected

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

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

<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 равно false, другими словами, когда вы выбираете ту же опцию

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

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

http://jsbin.com/dowoloka/4

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

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

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

Попробуй это:

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

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

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

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

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

ссылка guthub - угловой выбор

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

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

ДЕМО - ссылка

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

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

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

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

Первое, что вы хотите, это обычное событие onChange:

$("#selectbox").on("change", function(){
    console.log($(this).val());
    doSomething();
});

Чтобы вызвать событие onChange даже при повторном выборе того же параметра, можно отменить выбор выбранного параметра, когда раскрывающийся список получает фокус, установив для него недопустимое значение. Но вы также хотите сохранить ранее выбранное значение, чтобы восстановить его, если пользователь не выберет какую-либо новую опцию:

prev_select_option = ""; //some kind of global var

$("#selectbox").on("focus", function(){
    prev_select_option = $(this).val(); //store currently selected value
    $(this).val("unknown"); //set to an invalid value
});

Приведенный выше код позволит вам активировать обмен, даже если выбрано то же значение. Однако, если пользователь щелкает за пределами поля выбора, вы хотите восстановить предыдущее значение. Мы делаем это на onBlur:

$("#selectbox").on("blur", function(){
    if ($(this).val() == null) { 
       //because we previously set an invalid value 
       //and user did not select any option
        $(this).val(prev_select_option);
    }
});

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

как насчет изменения значения выбора, когда элемент получает фокус, например (с помощью 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('');
    }
});

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

установить selectedIndex элемента select на 0 изначально

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

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