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


214

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

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

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

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

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

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

Обновить:

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


1
Я могу понять, почему вы так думаете. Я буду держать это коротким. В моей форме есть два входа. Город (текстовое поле) и Штат (Выбор). Изначально отображается город и его штат. Когда пользователь выбирает состояние, поисковый фильтр где-то расширяет область его действия до «для всего штата» вместо «для конкретного города».
ePharaoh

9
Стрэджер, это не редкий элемент пользовательского интерфейса. имеет смысл в некоторых ситуациях. Другим примером будет составление массового электронного письма, тогда у вас будет выпадающий список справа со «специальными полями», которые вы можете быстро добавить в электронное письмо, имя, ссылку отказа и т. д.
Брайан Армстронг,

2
просто как примечание ... для встроенных событий, таких как onclick, onchange и т. д., вам не нужен префикс протокола "javascript:". на {событие} = "йоЗотеЬЫпд ();" просто отлично.
scunliffe

непроверенный: как насчет onClick, но применяется к тегам параметров? очевидно через класс, ненавязчивым способом
Разрушитель

6
@ Дезинтегратор Только при использовании событий щелчка не справляется со случаем использования, когда вы выбираете опцию с помощью клавиатуры. (Поймите, это древний вопрос - добавление для будущих посетителей ...)
peteorpeter

Ответы:


85

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

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

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


36
Но это ничего не сделает ", когда пользователь выбирает ... тот же самый снова", верно?
LarsH

3
Обратите внимание, что комментарий от @KayZhu является только наполовину правильным: правильное, что нужно сделать, это проверить, что «selectedIndex» больше или равно нулю (или больше -1). Там нет функции "type ()", и "selectedIndex" никогда не будет в undefinedлюбом случае.
Заостренный

2
@TJCrowder Вы правы - не уверены, о чем я думал, когда писал вторую половину. Я удалил исходный комментарий и чтобы не вводить в заблуждение других, вот оригинальный комментарий (обратите внимание, что первая половина верна, а вторая часть неправильна): это не будет работать, как ожидается, для первого варианта, который имеет индекс 0: 0, ложно в JS, поэтому doSomething () не будет выполнен. Вместо этого используйтеif(type(this.selectedIndex) != undefined; doSomething()
KZ

14
Этот ответ имеет наибольшее количество голосов, но он не решает проблему! doSomething()Функция не срабатывает , когда пользователь выбирает уже выбранный параметр. Смотрите это шлепнуть , где цвет фона меняется только при выборе другого варианта , чем выбранный в данный момент один.
скот

FWIW: Если вы хотите вызывать только doSomething()когда выбрана одна конкретная опция, например, «опция 3» в вышеприведенном примере, используйте if (this.selectedIndex==4)где цифра «4» представляет числовой индекс опций, а НЕ указанную value! (т. е. «вариант 3» является четвертым вариантом <select name="ab">).
rvrvrv

66

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

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

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

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


4
jsfiddle.net/ecmanaut/335XK работает в OSX Chrome 30, Safari 6, Firefox 17.
ecmanaut

2
Также работает в Win8 IE10, Win7 IE9, Win7 IE8, WinXP IE7 и IE6. Jsfiddle или IE shenanigans вынуждают вас использовать fiddle.jshell.net/ecmanaut/335XK/show/light непосредственно для теста, однако - их редактору не удается загрузить jQuery, используемый в примере для удобства чтения. Все вышеперечисленное только что протестировано с помощью мыши; чтобы сделать эту клавиатуру удобной, этот хак, вероятно, требует дополнительной работы, так как по крайней мере старые IE успешно запускают событие изменения, прежде чем у вас появится возможность выбрать «С».
экманавт

3
Действительно отличный совет. помогло мне решить невозможность выбора первого варианта
наору

7
Если значение уже выбрано, вкладка через это вызовет проблемы. Как только поле будет перемещено к значению, оно исчезнет, ​​что является довольно неожиданным поведением пользователя. Кроме того, когда вы уходите, вы потеряете выделение, даже если ничего не сделали. В противном случае хорошие идеи.
KyleMit

1
Используйте, например, jQuery .blur (), чтобы восстановить исходное выделение, если оно равно -1 в момент потери фокуса.
Mheinzerling

12

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


Спасибо! .blur () помогает. В IE7 событие изменения jQuery запускается дважды, если в коде нет .blur ().
ничья

7
Как это помогает с проблемой, выраженной в вопросе, то есть, что ничего не происходит, пока выбор не изменен ?
LarsH

2
@LarsH Прошло несколько лет с тех пор, как этот вопрос, не уверен - возможно, я прочитал вопрос неправильно и был сбит с толку.
Коди

Для тех, кто ищет сейчас, .live был полностью удален с 1.9 api.jquery.com/live/#live-events-handler . Используйте .change в качестве ярлыка api.jquery.com/change/#change-handler
parttimeturtle

9

Просто идея, но возможно ли поставить 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).


1
штопать! «почему я не подумал об этом» моменте. Спасибо!
ePharaoh

@Darryl Это на самом деле не сработало, как ожидалось. Иногда событие срабатывает даже до того, как пользователь завершит выбор. Смотрите обновление, которое я добавил к вопросу.
ePharaoh

8
Установка обработчиков событий для параметров не удастся во всех версиях IE! webbugtrack.blogspot.com/2007/11/…
scunliffe

8
тоже не получается в хроме :)
thinklinux

Работает в Firefox.
лезсакдоми

6

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

5

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

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


Вы можете избавиться от предупреждений о пропеллах, передав thisвместо $(this). Тем не менее, я не получаю все предполагаемое поведение из этого; это не предупреждает, когда я повторно выбираю ту же самую опцию.
Нумен

1
Примечание: onchange срабатывает при добавлении параметров удаления в поле выбора через JS. Не только когда пользователь выбирает предмет
zanderwar

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

4

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

  • Добавьте обработчик события 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>

4

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

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

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


Это работает с Chrome, но не с IE9: когда я нажимаю на элемент управления, его текст исчезает и не выпадает.
ChrisW

Проблема в том, что он выбивает текущий выбор. Если текущим выбором является B, и я нажимаю на раскрывающийся список, флажок появляется рядом с A! Но A на самом деле не выбран, потому что, если я соскользну с меню и отпущу кнопку мыши (отмена меню), выбор станет пустым. Выбор также становится пустым, если вы переходите на раскрывающийся список, что вы могли бы легко сделать, если бы переходили к какой-либо другой части формы, не ожидая нанести какой-либо ущерб по пути. (Нажмите tab на вашем jsfiddle, и вы поймете, что я имею в виду.)
skot

3

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


Да, я должен был бы .. но проблема, с которой я сталкиваюсь, является отдельной, ортогональной к проблеме, которую вы поднимаете. Событие onclick для <option> запускается даже до того, как пользователь завершает свой выбор, что, кажется, делает его невозможным для использования.
ePharaoh

События запускаются в Chrome, когда вы нажимаете клавишу ввода после перемещения выделения на новый элемент
Джин Головчинский

3

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

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


2

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


2

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


2
Тот же недостаток, что и в других onfocus="this.selectedIndex=-1"решениях: текущий выбор обнуляется, если вы переходите на компонент, или если вы щелкаете мышью по меню, ничего не выбирая. Нажмите вкладку на скрипке, чтобы понять, что я имею в виду. (Также обратите внимание, что вы получаете пустое значение, а не «-», когда вы делаете это. Это потому, что selectedIndex=-1не дает вам <option value="-1">; это было бы небольшим улучшением здесь для использования onfocus="this.selectedIndex=0". Это наполовину приличный обходной путь, но я не как потеря текущего выбора только из-за того, что я заглянул в меню, или даже просто во вкладке к нему
skot

2

в первую очередь вы используете 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>


2

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

1

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

Пытаться:

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

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


1

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

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

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

1

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


1
Не работает в Safari или Chrome для OS X. Предупреждение никогда не срабатывает.
скот


1

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

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


Не работает для меня в Safari или Chrome для OS X. jsfiddle.net/drskot/wLvL4pkw
Skot

1

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

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

http://jsbin.com/dowoloka/4


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

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

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


0

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

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

0

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

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

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

0

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

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

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

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

ДЕМО - ссылка


0

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

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

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


0

Есть несколько вещей, которые вы хотите сделать здесь, чтобы убедиться, что он запоминает более старые значения и вызывает событие 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);
    }
});

-1

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


-1

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

-1

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

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

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.