javascript - 单击按钮展开选择列表并隐藏选择

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 设备上作为微调器响应的选择列表的最佳方法是什么？

更新

让我现在更新问题，因为其中一部分现在正在工作:

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

您可以在CSS中为下拉菜单设置display: none，并使用display: inline-block创建一个.show类单击按钮时设置为下拉列表。

查看 jQuery 的 .addClass() 和 .click() 函数。

编辑:使用部分答案 from here ，我编辑了你的jsFiddle:https://jsfiddle.net/sqp2xej5/13/