Как показать модальный ящик при выборе варианта выбора с помощью jQuery? [dубликат]

Мне нужно что-то точно такое же. Это помогло мне:

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

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

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

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

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

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

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

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

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

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

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

Я назначил свой раскрывающийся список ID, 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 на Выбрать. Это будет срабатывать в любое время, когда пользователь нажимает кнопку выбора. На этом этапе вы можете определить, какой вариант был выбран. Чтобы иметь этот триггер в правильное время, onclick опции может размыть поле (сделать что-то еще активным или просто .blur () в jQuery).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

guthub link - угловой выбор

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

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

DEMO - guthub link - угловой выбор

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

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

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

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

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

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

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

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

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

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

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

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

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

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

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

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

Попробуйте:

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

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

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

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

Скопировано из http://www.w3schools.com/TAGS/tag_Select.asp onChange обозначает JavaScript для запуска, когда пользователь выбирает один из параметров. Это означает, что действие инициируется немедленно, когда пользователь выбирает элемент, а не когда нажата кнопка «отправить».

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

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

http://jsbin.com/dowoloka/4