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

expand select list on button click and hide select

本文关键字：选择 列表 隐藏 按钮 单击      更新时间：2023-09-26

>我有一个常规的选择列表，我想：

  1. 在按钮上展开它，这是工作和完成
  2. 保持隐藏的选择列表，直到单击按钮。
  3. 我希望列表选项是点击事件。

请问有什么想法和建议吗？

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 iddiv 具有上面的单个值，如上例所示。

我确实知道这必须在循环内while但是一旦我将这个<div id="test2>...</div>放在循环中，它就根本不起作用。

请问我可以向你们寻求建议吗？

排序！

:)正如你说的一点阅读和完成：）

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

谢谢大家的帮助：）

您可以在 CSS 中为下拉列表设置display: none，并在单击按钮时创建一个.show

类，其中包含要设置为下拉列表的display: inline-block。

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

编辑：

使用此处的部分答案，我编辑了您的jsFiddle：https://jsfiddle.net/sqp2xej5/13/

你可以

试试这个

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>

相关文章：