HTML 是否有 onSelect 事件或等效事件<select>?

Question

我有一個輸入表單，可讓我從多個選項中進行選擇，並在用戶更改選擇時執行某些操作。 例如，

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

現在， doSomething()僅在選擇更改時觸發。

我想在用戶選擇任何選項時觸發doSomething() ，可能再次選擇相同的選項。

我曾嘗試使用“onClick”處理程序，但它在用戶開始選擇過程之前被觸發。

那么，有沒有辦法在用戶每次選擇時觸發一個功能？

更新：

Darryl 提出的答案似乎有效，但並不能始終如一地工作。 有時，一旦用戶單擊下拉菜單，甚至在用戶完成選擇過程之前，事件就會被觸發！

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

在選擇集中時，可與鼠標選擇和鍵盤上/下鍵一起使用。

Answer 2

我需要完全相同的東西。 這對我有用：

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

支持這個：

當用戶選擇任何選項時，可能再次選擇相同的選項

Answer 3

幾個月前我在創建設計時遇到了同樣的問題。 我找到的解決方案是在您正在使用的元素上結合使用.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()

Answer 4

只是一個想法，但是否可以在每個<option>元素上放置一個 onclick？

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

---

另一種選擇可能是在選擇上使用 onblur。 這將在用戶點擊離開選擇的任何時候觸發。 此時，您可以確定選擇了哪個選項。 為了在正確的時間觸發此事件，選項的 onclick 可能會模糊該字段（使其他內容處於活動狀態或只是 jQuery 中的 .blur()）。

Answer 5

onclick 方法並不完全糟糕，但如前所述，當鼠標單擊未更改值時，它不會被觸發。
然而，可以在 onchange 事件中觸發 onclick 事件。

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

Answer 6

如果你真的需要它像這樣工作，我會這樣做（以確保它可以通過鍵盤和鼠標工作）

• 將 onfocus 事件處理程序添加到選擇以設置“當前”值
• 將 onclick 事件處理程序添加到選擇以處理鼠標更改
• 將 onkeypress 事件處理程序添加到 select 以處理鍵盤更改

不幸的是，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>

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

你可以在這里看到一個工作演示。

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

這對用戶來說更有意義，並允許 JavaScript 在他們每次選擇任何選項（包括較早的選項）時運行。

這種方法的缺點是它破壞了選項卡到下拉列表並使用箭頭鍵選擇值的能力。 這對我來說是可以接受的，因為所有用戶一直點擊所有內容，直到永恆結束。

Answer 9

我知道這個問題現在已經很老了，但是對於仍然遇到這個問題的任何人，我通過在我的選項標簽中添加一個 onInput 事件，然后在那個被調用的函數中檢索該選項輸入的值，在我自己的網站上實現了這一點。

 <select id='dropdown' onInput='myFunction()'> <option value='1'>1</option> <option value='2'>2</option> </select> <p>Output: </p> <span id='output'></span> <script type='text/javascript'> function myFunction() { var optionValue = document.getElementById("dropdown").value; document.getElementById("output").innerHTML = optionValue; } </script>

Answer 10

這可能無法直接回答您的問題，但可以通過簡單的設計級別調整來解決此問題。 我知道這可能不是 100% 適用於所有用例，但我強烈建議您考慮重新考慮您的應用程序的用戶流程，以及是否可以實施以下設計建議。

我決定做一些簡單的事情，而不是使用其他並非真正用於此目的的事件（ blur ， click等）來破解onChange()的替代方案

我解決它的方式：

只需在前面加上一個占位符選項標簽，例如 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 應用程序，我發現這種設計選擇大大簡化了我的代碼。 在解決這個問題之前，我花了幾個小時解決這個問題，而且我不必重新編寫很多代碼。 但是，如果我使用 hacky 替代方案，我將需要考慮邊緣情況，以防止 ajax 請求的雙重觸發等。這也不會破壞默認瀏覽器行為作為一個不錯的獎勵（在移動設備上測試瀏覽器也是如此）。

有時，您只需要退后一步，從大局考慮最簡單的解決方案。

Answer 11

首先，您使用 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>

Answer 12

Add an extra option as the first, like the header of a column, which will be the default value of the dropdown button before click it and reset at the end of doSomething() , so when choose A/B/C, the onchange event always trigs, when the selection is State , do nothing and return. 正如許多人之前提到的， 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;
}

Answer 13

選擇標簽（在這種情況下）的美妙之處在於它會從選項標簽中獲取它的值。

嘗試：

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

為我工作得體。

Answer 14

實際上，當用戶使用鍵盤更改選擇控件中的選擇時，onclick 事件不會觸發。 您可能必須結合使用 onChange 和 onClick 來獲得您正在尋找的行為。

Answer 15

當遇到類似問題時，我所做的是我在選擇框中添加了一個“onFocus”，它附加了一個新的通用選項（“選擇一個選項”或類似的東西）並將其默認為選定的選項。

Answer 16

所以我的目標是能夠多次選擇相同的值，這實際上會覆蓋 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/

Answer 17

這是我的解決方案，與這里的任何其他解決方案完全不同。 它使用鼠標位置來確定是否單擊了選項，而不是單擊選擇框以打開下拉列表。 它利用 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/

Answer 18

你應該嘗試使用option:selected

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

Answer 19

什么對我有用：

<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()”，而當 onchange 事件為 false 時，onclick 會調用“doSomething()”，換句話說，當您選擇相同的選項時

Answer 20

試試這個（當你選擇選項時觸發事件，不改變選項）：

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

http://jsbin.com/dowoloka/4

Answer 21

一個真正的答案是不使用選擇字段（如果您在重新選擇相同的答案時需要做某事。）

使用常規 div、按鈕、顯示/隱藏菜單創建一個下拉菜單。 鏈接： https ://www.w3schools.com/howto/howto_js_dropdown.asp

如果能夠將事件偵聽器添加到選項，則可以避免。 如果選擇元素有一個 onSelect 偵聽器。 如果單擊選擇字段並沒有嚴重觸發 mousedown、mouseup 並在 mousedown 上同時單擊所有內容。

Answer 22

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

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

在這里，您返回了索引，並且在 js 代碼中，您可以將此返回與一個開關或任何您想要的東西一起使用。

Answer 23

使用jQuery：

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

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

Answer 24

嘗試這個：

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

Answer 25

請注意，IE 上的 OPTION 標簽不支持事件處理程序，快速思考..我想出了這個解決方案，嘗試一下並給我您的反饋：

<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 事件，確實，當您單擊時我們會丟失所選項目，如果您的列表很長可能會很煩人，但它可能會以某種方式幫助您..

Answer 26

很久以前，但在回答最初的問題時，這有幫助嗎？ 只需將onClick放入SELECT行。 然后將您希望每個OPTION執行的操作放在OPTION行中。 IE：

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

Answer 27

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

Answer 28

我也遇到過類似的需求，最終為此編寫了一個 angularjs 指令——

guthub 鏈接 - 角度選擇

使用element[0].blur(); 將焦點從選擇標簽上移開。 邏輯是在第二次點擊下拉菜單時觸發這種模糊。

即使用戶在下拉列表中選擇相同的值，也會觸發as-select 。

演示 -鏈接

Answer 29

您需要在此處執行一些操作，以確保它記住舊值並觸發 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
});

即使選擇了相同的值，上面的代碼也將允許您觸發 onchange。 但是，如果用戶在選擇框外單擊，您希望恢復以前的值。 我們在 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);
    }
});

Answer 30

另一種解決方案是使用 onMouseUp 事件。 OnMouseUp 也適用於重新選擇和更改選項的相同選項。

唯一的缺點。 當下拉框打開時調用代碼，第二次選擇時調用。 對於 AJAX 請求，請記住這一點。 如果這不會損害您的邏輯，您可以將其用作簡單的內聯黑客。

<select id="bla" onmouseup="console.log( document.getElementById('bla').options[document.getElementById('bla').selectedIndex].value );">
  <option value="0">A</option>
  <option value="1">B</option>
</select>

Answer 31

我發現的最佳解決方案是在您的選擇元素中添加一個禁用選項作為第一個元素，以便所有其他項目都可用於響應 onchange 事件中的單擊。

<select onchange="doSomething()">
  <option disabled selected value> -- select an option -- </option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Answer 32

當元素獲得焦點時如何更改選擇的值，例如（使用 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('');
    }
});

Answer 33

唯一對我有用的解決方案是在“onFocus”事件上完全重置 SELECT。 這樣，SELECT 總是在“onChange”事件上“改變”：

$('select').on('focus', function(ev) {
    var $select = $(this);
    var options = $select.html();
    $select.empty();
    $select.append(options);
});

$('select').on('change', function(ev) {
    // Now the select element ALWAYS fires onChange
});

Answer 34

您可以使用 onChange： http ://www.w3schools.com/TAGS/tag_Select.asp

復制自http://www.faqs.org/docs/htmltut/forms/_SELECT_onChange.html onChange 指定當用戶選擇其中一個選項時運行的 JavaScript。 這意味着當用戶選擇一個項目時會立即啟動一個操作，而不是在按下“提交”按鈕時。

Answer 35

我發現了這個解決方案。

最初將選擇元素的 selectedIndex 設置為 0

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

調用此方法 onChange 事件