擴大按鈕，點擊選擇列表，並隱藏選擇

Question

我有一個經常選擇列表，我想：

1. 展開它的按鈕，在工作和做
2. 保持隱藏選擇列表，直到按鈕被點擊。
3. 我想列表選項是onclick事件。

有什麼想法和建議嗎？

showDropdown = function (element) { 
 
    var event; 
 
    event = document.createEvent('MouseEvents'); 
 
    event.initMouseEvent('mousedown', true, true, window); 
 
    element.dispatchEvent(event); 
 
}; 
 

 
window.runThis = function() { 
 
    var dropdown = document.getElementById('dropdown'); 
 
    showDropdown(dropdown); 
 
};

<select id="dropdown"> 
 
    <option value="Red">Red</option> 
 
    <option value="Green">Green</option> 
 
    <option value="Blue">Blue</option> 
 
</select> 
 
<br> 
 
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>

或者是什麼做的，作爲對adndroi和iOS設備微調響應從目錄中選擇的最佳方式？

UPDATE

現在讓我更新的問題是，這部分現在的工作：

function get_tables_restaurant(){ 
     if($result2 = $this->db->query('SELECT * FROM fandb_tables ORDER BY title ASC')){ 


    $return .= '<div class="lineheight"><button id="fire" type="button" class="add_table">+</button></div> 
    <select id="dropdown">'; 
     while($r2 = $result2->fetch_object()){ 

     $return .= '<option value="'.htmlspecialchars($r2->title).'">'.htmlspecialchars($r2->title).'</option>'; 


     } 
     $return .= '</select>'; 
     $return .= '<div id="test2" style="display: none;"> 
<h4>Table '.htmlspecialchars($r2->title).'</h4> 
     <form method="post" action=""> 
      <input type="hidden" name="area" size="50" value="'.htmlspecialchars($r2->area).'"/> 
      <input type="hidden" name="tableno" size="50" value="'.htmlspecialchars($r2->title).'"/> 
      <input type="hidden" name="title" size="50" value="1"/> 
      <input type="submit" value="STARTER" class="starter"/> 
     </form> 
     <form method="post" action=""> 
      <input type="hidden" name="area" size="50" value="'.htmlspecialchars($r2->area).'"/> 
      <input type="hidden" name="tableno" size="50" value="'.htmlspecialchars($r2->title).'"/> 
      <input type="hidden" name="title" size="50" value="2"/> 
      <input type="submit" value="MAIN COURSE" class="maincourse"/> 
     </form> 
     <form method="post" action=""> 
      <input type="hidden" name="area" size="50" value="'.htmlspecialchars($r2->area).'"/> 
      <input type="hidden" name="tableno" size="50" value="'.htmlspecialchars($r2->title).'"/> 
      <input type="hidden" name="title" size="50" value="3"/> 
      <input type="submit" value="DESSERT" class="dessert"/> 
     </form> 
     <button onclick="$(\'#test2\').popup(\'hide\');" id="dismiss">DISMISS</button> 
</div>'; 
     } 

所以，現在每個我需要顯示彈出這是test2的單獨的值作爲ID的div選項根據上面的例子。

我確實知道這必須在循環內while然而，它不會工作，只要我將這個<div id="test2>...</div>放在循環內。

請問我們是否有建議？

排序！

:)正如你所說的讀取位，做:)

$("#dropdown").change(function() { 
     var element = document.getElementById('dropdown'); 
    $('#test2'+element.value).popup('show'); 

感謝您對大家的幫助:)

Answer 1

您可以設置display: none在CSS的下拉菜單，並作出.show類當點擊按鈕時將display: inline-block設置爲下拉菜單。

看看jQuery的.addClass()和.click()功能。

編輯：使用答案from here的一部分，我編輯您的jsfiddle：https://jsfiddle.net/sqp2xej5/13/

Answer 2

你可以試試這個

showDropdown = function (element) { 
 
    var event; 
 
    event = document.createEvent('MouseEvents'); 
 
    event.initMouseEvent('mousedown', true, true, window); 
 
    element.dispatchEvent(event); 
 
}; 
 

 
window.runThis = function() { 
 
    var dropdown = document.getElementById('dropdown'); 
 
    showDropdown(dropdown); 
 
}; 
 

 
$('#reload').click(function(){ 
 
    $('#dropdown').click(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="dropdown"> 
 
    <option value="Red">Red</option> 
 
    <option value="Green">Green</option> 
 
    <option value="Blue">Blue</option> 
 
</select> 
 
<br> 
 
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button> 
 
<button id="reload" type="button">Hide dropdown items</button>