Question

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

在按钮上展开它，即工作完成
保持隐藏的选择列表，直到单击该按钮。
我想将选项列为onclick事件。

请提出任何意见和建议吗？

＆＃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);
};

＆＃13;

<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>

＆＃13;

或者，在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，并在点击该按钮时将.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>

展开按钮上的选择列表并隐藏选择

2 个答案: