顯示選擇選項時的JavaScript事件？

<select>元素顯示/隱藏其<options>列表時觸發了什麼事件（如果有）？顯示選擇選項時的JavaScript事件？

例子：

<select> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select>

當你用鼠標點擊這個選擇框瀏覽器顯示的選項列表。

但是，當您進入選擇框時，瀏覽器不會顯示選項列表。

是否在select元素中檢查mouseup事件的唯一方法，還是我缺少明顯的東西？

$(document.body).on('mouseup', 'select', function(){    
    console.log('Either shown or hidden the options...but which?') 
});

在此先感謝。

P.S.我試圖在顯示<options>時向<select>元素添加一個類，以便在瀏覽器顯示「選項彈出窗口」時顯示不同的自定義插入樣式。

來源

2016-09-22 Jacob Wyke

使用'jquery'的'on change' – mmativ

點擊這裏添加class和onchange來刪除它呢？ –

鼠標事件處理程序是不夠的，因爲使用鍵盤可以選擇一個select元素，然後按alt-down或alt-up刪除和縮小列表。（關於你實際想要達到的目標，你爲什麼要這麼做？用戶期望標準控件（如選擇元素）的標準行爲。） – nnnnnn

這將意味着select元素是焦點。所以在這種情況下，你不需要JavaScript。你可以用css來迎合這個。

select:focus { 
    color:red; 
}

但是如果你確實想jQuery的使用它會是這個樣子：

$("select").focus(function(){ 
    console.log(" h1 "); 
})

使用純粹的javascript，給你選擇一個id =「選擇」，你可以這樣做：

var x = document.getElementById("select"); 
x.addEventListener("focus", myFocusFunction, true); 
x.addEventListener("blur", myBlurFunction, true); 

function myFocusFunction() { 
    document.getElementById("select").style.backgroundColor = "yellow"; 
} 

function myBlurFunction() { 
    document.getElementById("select").style.backgroundColor = ""; 
}

來源

2016-09-22 02:27:29 partypete25

問題問是否有列表下拉（或再次隱藏）的事件，這與接收焦點的select元素不同。 – nnnnnn

@nnnnnn是的你是對的。這不是問題的正確答案。沒有與顯示它的選項的select元素相關聯的javascript事件。 – partypete25

@ user300838如果你真的想在select元素打開的時候能夠實現添加類的效果，你可能需要使用一個像http://gregfranko.com/jquery.selectBoxIt這樣的jquery插件。 js/index.html，https://silviomoreto.github.io/bootstrap-select/或https://selectize.github.io/selectize.js/ – partypete25

顯示選擇選項時的JavaScript事件？

回答

相關問題