Чи є подія 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 ()

Просто ідея, але чи можна поставити натискання на кожен з <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 до вибору, щоб обробити зміни миші
• Додайте обробник подій onkeypress до вибору, щоб обробити зміни клавіатури

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

<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 НЕ запускаються, коли користувач використовує клавіатуру для зміни вибору в елементі управління. Можливо, вам доведеться використовувати комбінацію onChange і onClick, щоб отримати поведінку, яку ви шукаєте.

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

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

Під час цієї відповіді я писав складну заявку Vue і виявив, що цей вибір дизайну значно спростив мій код. Я витратив години на цю проблему, перш ніж вирішився з цим рішенням, і мені не довелося переписувати багато свого коду. Однак, якби я пішов із лайливими альтернативами, мені потрібно було б враховувати кращі випадки, щоб запобігти подвійному запуску запитів ajax тощо. Це також не псує поведінку браузера за замовчуванням як хороший бонус (перевірено на мобільному пристрої) браузери).

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

Що я зробив, зіткнувшись із подібною проблемою, це те, що я додав "onFocus" у поле вибору, яке додає нову загальну опцію ("select a option" or something similar) та за замовчуванням її як вибрану опцію.

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

<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 (у цьому сценарії) полягає в тому, що він захопить його значення з тегів опцій.

Спробуйте:

<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 є помилковою, іншими словами, коли ви вибираєте той самий варіант

Спробуйте це (подія, яка спрацьовує саме тоді, коли ви вибираєте опцію, без зміни опції):

$("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 запускається, навіть коли користувач вибирає те саме значення у спадному меню.

DEMO - посилання

Єдина правдива відповідь - не використовувати поле вибору (якщо вам потрібно щось зробити, коли ви повторно вибираєте ту саму відповідь.)

Створіть спадне меню за допомогою звичайних меню div, кнопки, показу / приховування. Посилання: https://www.w3schools.com/howto/howto_js_dropdown.asp

Не вдалося уникнути, якби хтось зміг додати слухачів подій до варіантів. Якщо для елемента вибору був слухач onSelect. І якщо натиснути на поле вибору, не обтяжуюче стріляйте з містечка, миші та клацайте все одночасно на мусудаун.

Тут ви хочете зробити кілька речей, щоб переконатися, що вони запам'ятовують старі значення та запускають подію зміни, навіть якщо знову вибирається той самий параметр.

Перше, що вам потрібно - це регулярні заходи 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>

Те, що я роблю тут, насправді - скидання індексу вибору, щоб подія заміна буде спрацьовувати завжди, правда, ви втрачаєте вибраний елемент при натисканні, і це, можливо, дратує, якщо ваш список довгий, але це може допомогти вам в деякому разі ..

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

Я знайшов це рішення.

встановіть початковий елемент selectIndex елемента вибору 0

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

виклик цього методу onChange події