如何使一個選擇框下拉，通過點擊與jquery選擇框不同的地方

Question

我想實現的是我想點擊一個div，這將使選擇框下拉。所以像這樣：

$('#test div').click(function(){ 
    $('#test select').dropDown(); 
}); 

有沒有這樣的行動，這樣做？甚至是某種工作？

Answer 1

(function($) { 
 
    "use strict"; 
 
    $.fn.openSelect = function() 
 
    { 
 
     return this.each(function(idx,domEl) { 
 
      if (document.createEvent) { 
 
       var event = document.createEvent("MouseEvents"); 
 
       event.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
 
       domEl.dispatchEvent(event); 
 
      } else if (element.fireEvent) { 
 
       domEl.fireEvent("onmousedown"); 
 
      } 
 
     }); 
 
    } 
 
}(jQuery)); 
 

 
$('#test div').click(function(){ 
 
    $('#test select').openSelect(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
    <div> 
 
    Click 
 
    </div> 
 
    <br /><br /> 
 
    <select> 
 
    <option>123</option> 
 
    <option>456</option> 
 
    <option>789</option> 
 
    </select> 
 
</div>

你可以註冊以下jQuery函數：

(function($) { 
    "use strict"; 
    $.fn.openSelect = function() 
    { 
     return this.each(function(idx,domEl) { 
      if (document.createEvent) { 
       var event = document.createEvent("MouseEvents"); 
       event.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
       domEl.dispatchEvent(event); 
      } else if (element.fireEvent) { 
       domEl.fireEvent("onmousedown"); 
      } 
     }); 
    } 
}(jQuery)); 

而且只需調用它：$('#test select').openSelect();

試穿的jsfiddle：https://jsfiddle.net/Zay_DEV/ptkxhky1/的