觸發選擇表單元素，以顯示其選項（開啓下拉選項列表）的JavaScript

這裏是標記觸發選擇表單元素，以顯示其選項（開啓下拉選項列表）的JavaScript

<select id="person_prefix" name="prefix"> 
<option value=""></option> 
<option value="Dr" selected="selected">Dr</option> 
<option value="Mr">Mr</option> 
<option value="Ms">Ms</option> 
<option value="Mrs">Mrs</option> 
</select>

，我想，這樣的選項列表下降到觸發JavaScript事件。使用jQuery我試過以下內容：

$("#person_prefix").click(); 
$("#person_prefix").mousedown(); 
$("#person_prefix").change();

但似乎沒有任何工作。哪個事件是這樣的，如何觸發？

感謝

來源

2010-10-02 Savvas Georgiou

的[你怎麼能告訴編程一個HTML選擇地掉了下來（例如，由於鼠標懸停）？]可能的複製（https：//開頭計算器.com/questions/249192/how-can-you-program-by-tell-an-html-select-to-drop-down-for-example-due） – rath 2017-10-10 10:34:42

你不能這樣做跨瀏覽器編程。您可以具有完全定製的解決方案實際上並不顯示一個<select>元素取代下拉...但你不能以編程方式表現出來，尤其是在IE瀏覽器。

的最接近你能做的就是通過.focus()移動用戶的元素：

$("#person_prefix").focus();

這與一些CSS樣式時，它專注於（:focus）通常是提醒大家注意一個非常好的辦法它。

來源

2010-10-02 17:17:00

如果您設置大小屬性，select將顯示您指定大小的選項數。

var sel= document.getElementsByName('select_1')[0]; 
var len= '10'// or sel.options.length; 
// safest: var len=sel.getElementsByTagName('*').length; 
sel.setAttribute('size',len)

將大小設置回'1'將摺疊選擇。

來源

2010-10-02 20:07:28 kennebec

某些瀏覽器不考慮optgroups，其他人則將它們計爲選項因此如果您有2個optgroups並指定options.length或10，則不顯示10個選項。 – kennebec 2010-10-02 20:11:46

對不起，我結結巴巴地回覆了我自己的評論。 – kennebec 2010-10-02 20:11:46

您可以選擇表單元素，但適當的解決方法上沒有觸發點擊事件是這個插件：
jQuery.customSelect

的最大優點是，它推出真正select元素（你實際點擊一個無形選擇 - opacity: 0），這是在移動設備上重要的（如iPhone有自己的佈局顯示select's選項）。

如果你不想下載整個插件，你可以自己準備解決方案，因爲你知道如何觸發select（通過設置opacity: 0隱藏它 - 它仍然是可點擊的）。

來源

2013-02-06 15:01:11 matewka

基礎上@肯納貝克的答案，一個jQuery版本，以獲得的選項和optgroups計數：

var sel = $('select.mySelectClass'); 
var count=0; 

sel.find('option').each(function() { 

    count++; 
}); 

sel.find('optgroups').each(function() { 

    count++; 
}); 

sel.attr('size',count);

來源

2013-05-16 20:51:58 jsh

'var count = sel.find（'option，optgroups'）。length;' – 2014-09-05 19:00:09

我曾經尋找如何做同樣的事情，並沒有發現任何可行的解決方案，但隨後我們的JavaScript組一個傢伙來一個聰明的解決辦法。這是代碼。

HTML

<input type="button" id="show" value="show" /> 
<select id="myslect"> 
    <option>nothing</option> 
    <option>something</option> 
    <option>anything</option> 
</select>

的Javascript

$("#show").click(function() { 
    var element = $("select")[0], 
     worked = false; 
    if(document.createEvent) { // chrome and safari 
     var e = document.createEvent("MouseEvents"); 
     e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     worked = element.dispatchEvent(e); 
    } 
    if(!worked) { // unknown browser/error 
     alert("It didn't worked in your browser."); 
    } 
});

我不知道如何鏈接到組後，所以你可以看到整個線程。無論如何，積分CJ馬多拉拉。做得好！

更新：僅適用於Chrome和Safari

來源

2014-07-08 09:57:03

嘿你的解決方案對我來說很有效，但是選擇選項在點擊結束時消失。你將如何做到這一點，以保持選擇選項顯示，直到實際選擇一個選項？ – 2015-11-27 17:59:09

觸發選擇表單元素，以顯示其選項（開啓下拉選項列表）的JavaScript

回答

相關問題