我有以下標記：HTML SELECT - 即使當選項不改變觸發的JavaScript onChange事件
<select onchange="jsFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
當使用者拉下組合框，並選擇先前選擇了相同的選項（或沒有按」根本不會改變選擇），JavaScript不會將其視爲onchange事件。因此，jsFunction()未被調用。但是我想要在這種情況下調用jsFunction()。我怎樣才能做到這一點？
我會做這樣的：
<select onchange="jsFunction()">
<option value="" disabled selected style="display:none;">Label</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
如果你願意，你可以有相同的標籤作爲第一選擇，在這種情況下是1 更妙的是：把一個標籤在那裏在框中的選擇。
而且每當我顯示組合框時，我都會將** selecedIndex **設置爲0。 – 2012-08-09 07:50:50
好的解決方案@Simson。 – 2016-06-29 14:25:07
試試這個。只需添加一個空白選項。這將解決您的問題。
<select onchange="jsFunction()">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
這將在頂部創建一個空框，這也是可選的。不是一個很好的解決方案。 – 2012-08-09 06:05:43
適用於第一個選項。當選擇其他選項時，用戶再次選擇相同的選項？ – 2012-08-09 06:08:47
它沒有發射，因爲該值沒有「改變」。這是相同的價值。不幸的是，使用change事件無法達到預期的行爲。
您可以處理blur事件，並在用戶離開選擇框時執行所需的任何處理。這樣，即使用戶選擇了相同的值，您也可以運行所需的代碼。
其實情況就是這樣。 我有一個combox盒子。當選擇任何選項時，我隱藏combox並使用CHANGE選項將組合框的值顯示爲LABEL。當點擊CHANGE時，我再次顯示組合框。 – 2012-08-09 06:13:37
@RajBD，是的，你將無法做到這一點，沒有處理'blur'，並讓他們離開選擇更新。儘管這是一個次要的可用性問題。我認爲如果你給他們一個明確的選項來「取消」會更好，當你顯示它時，在選擇框旁邊放置一個「取消」鏈接。 – Strelok 2012-08-09 06:27:52
您必須添加空選項來解決這個問題，
我也可以給你一個解決方案，但它給你是罰款爲您或不是因爲比jsFunction選擇其他選項後，用戶選擇默認選項會被調用兩次。
<select onChange="jsFunction()" id="selectOpt">
<option value="1" onclick="jsFunction()">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
function jsFunction(){
var myselect = document.getElementById("selectOpt");
alert(myselect.options[myselect.selectedIndex].value);
}
我試過ONCLICK之前..不適用於所有瀏覽器..特別是Chrome。 – 2012-08-09 07:21:44
對每個選項元素都使用「onmouseup」屬性。它是詳細的，但應該工作。同時，這取決於你的函數實際上是幹什麼的，你可以以不同的安排你的事情了一下，假設的數量是在處理重要：
<select>
<option onmouseup="handler()" value="1">1</option> //get selected element in handler
<option onmouseup="handler(2)" value="2">2</option> //explicitly send the value as argument
<option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element's value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary
</select>
這工作：
<select name="type" onmousedown="this.value='';" onchange="alert('Changed.');">
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
<option value='4'>Four</option>
<option value='5'>Five</option>
<option value='6'>Six</option>
<option value='7'>Seven</option>
<option value='8'>Eight</option>
<option value='9'>Nine</option>
<option value='10'>Ten</option>
</select>
這不起作用 – smartmouse 2015-05-07 08:46:03
@smartmouse它適用於最新版本的谷歌瀏覽器 – Ben 2015-05-08 17:01:08
JavaScript代碼：
唯一的缺點是，當用戶單擊下拉列表中，當前選擇的項目不會出現選擇
篩選。
1st是「空」。
<option></option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
這不是所問問題的答案，它是關於JavaScript更改事件的行爲。 – Carpetsmoker 2016-03-08 04:11:06
只需設置相關<select>標籤的selectIndex到-1作爲處理事件的最後一步。
mySelect = document.getElementById("idlist");
mySelect.selectedIndex = -1;
它屢試不爽，去除亮點，讓您再次選擇相同（或不同）的元素。
正常情況下，當我想要這種行爲時，我添加了一個沒有值的額外條目，這是默認值...並且在事件處理程序中檢查它是否被選中，如果是，則不執行任何操作。 – Geoffrey 2012-08-09 06:01:07
@Geoffrey我也是這麼想的。這又帶來了另一個問題。我如何動態地（使用JavaScript）選擇所需的選項（在這種情況下輸入沒有值）？ – 2012-08-09 06:05:13