[英]HTML select element onchange trigger for already selected option
我有以下 HTML 包含下拉列表（單選）
<script type="text/javascript">
$(document).ready(function () {
$("#garden").bind('change', function() {
alert("Changed");
});
});
</script>
<body>
<div id="content">
<select id="garden">
<option value="flowers">Flowers</option>
<option value="shrubs">Shrubs</option>
<option value="trees">Trees</option>
<option value="bushes">Bushes</option>
</select>
</div>
</body>
</html>
呈現 HTML 頁面時，默認情況下， Flowers是下拉列表中已選擇的元素（第一個）。 如果我選擇任何其他值（“Flowers”除外），則會觸發 Javascript 函數並顯示包含“已更改”的警告框。
Q1：但是，如果我再次重新選擇Flowers ，則不會觸發onchange事件。 我知道這是因為下拉列表中沒有“更改”。 即使沒有更改下拉列表中已選擇的值，是否也可以觸發函數？
Q2：如何提取剛剛選擇的元素的值（即使沒有選擇任何新元素——也就是說，用戶點擊下拉菜單，然后簡單地點擊其他地方）。
我已經嘗試過onblur但這需要用戶單擊文檔上的其他位置，以便下拉菜單失去焦點。 任何幫助將非常感激。
[為簡潔起見，我在代碼片段中編輯了 HTML 標題和其他腳本內容。]
好吧，我想我不能 100% 了解您，但我可以在這里建議一些事情：
將點擊事件處理程序綁定到select
$("#garden").bind('click', function() { alert($(this).find('option:selected').text()); }); 綁定focusout事件處理程序
$("#garden").bind('focusout', function() { alert($(this).find('option:selected').text()); }); 當然，綁定您已經獲得的change事件處理程序。 click event handler可能有點棘手，因為每次單擊元素時它都會觸發。 但是如果你每次都不用alert()它根本不應該是一個問題，你就得到了當前的選擇並且可以隨心所欲地使用它。
您可以在加載頁面時手動觸發事件：
$(document).ready(function() {
$("#garden").bind("change", function() {
// ...
}).change();
});
這將獲取初始值 - 所以我認為它使您的第二個問題無關緊要。 這不適用於所有情況（我希望您的實際處理程序不是警報，而是有用的東西！），但可以派上用場......
你確定無論你做什么都是最明智的做事方式嗎？ 與通過打開選擇並選擇當前選定的項目來選擇它相比，如果您通過將其保留為默認值來選擇一個項目，則具有不同的行為似乎非常奇怪。
如果您想讓他們明確選擇鮮花，那么您可能希望在頂部有一個虛擬條目，上面寫着“請選擇一個”，這意味着如果他們想要的話，他們將被迫實際換成鮮花。 這可能比使用更多事件處理程序等使代碼復雜化更簡單。
如果您確實需要沿着您所遵循的路徑前進，那么您可能需要考慮如果有人只是點擊控件然后通過它，行為是什么。 即是否也應該關閉您的腳本？
編輯以詳細回應評論：
在這種情況下，您要做的是掛接到表單的 onSubmit 處理程序。 正如您可以想象的那樣，這在表單提交時被調用。 如果您的處理程序返回 false，則不會提交該表單。
傳統上，此處理程序用於通過檢查您關心的任何表單元素的狀態並檢查它們的值是否有效來進行客戶端驗證。 在這種情況下，您將檢查花園的值是否為“N/A”或您設置的任何值，如果是，則彈出警報（在最簡單的情況下）並可能標記需要注意的字段。 然后用戶將選擇一個有效的條目（希望如此），下次他提交您的驗證將成功，您在處理程序中返回 true 並且用戶可以很高興他提交了有效的輸入。
與往常一樣，盡管標准免責聲明任何數據都可以由確定的用戶發送到您的服務器，因此您不應該僅僅因為您進行了此驗證就認為您正在服務器上獲取有效數據。 :)
問題 1：我認為該事件將是“onSelect”。
問題 2：我認為“onSelect”事件也適用，但不是 100% 肯定。 至少可以嘗試並弄亂一些東西。
在我看來，最簡單的解決方案是將第一個選項復制到具有相同標簽的禁用和隱藏元素中。 您的下拉列表將顯示隱藏選項的標簽，但不會顯示在列表中。
<select id="garden" name="blabla" onchange="this.form.submit();" >
<option value="" disabled selected style="display:none;">Flowers</option>
<option value="flowers" >Flowers</option>
<option value="shrubs" >Schrubs</option>
<option value="trees" >Trees</option>
<option value="bushes" >Bushes</option>
</select>
您的問題似乎與HTML SELECT - Trigger JavaScript ONCHANGE event相同， 即使選項未更改，並且上面提到的解決方案由 Simon Aronsson 提供。
注意：該解決方案適用於 Firefox，但不適用於 Internet Explorer。
JavaScript-已選擇選項的HTML select元素onchange觸發器
[英]JavaScript - HTML select element onchange trigger for already selected option
當已選擇選項時，如何獲取HTML Select元素的通知
[英]How to get a notification for an HTML Select element, when the option is already selected
如何觸發已選擇的選項的onclick / onchange事件在javascript中單擊
[英]How to trigger the onclick / onchange event for a already selected option clicks in javascript
當已經選擇了選擇選項時發生事件觸發器Select2（多個選擇選項）
[英]Event Trigger Select2 when the select option is already selected (Multiple Select Option)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.