下拉菜单显示不正确

Question

我正在尝试制作一个简单的下拉菜单，并添加“确定”和“取消”按钮。 我有代码：

  $("#dialog").hide(); $("#target").click(function() { $("#dialog").show(); $("#dialog").dialog(); });

 <!DOCTYPE html> <html> <body> <div id="dialog" title="Basic dialog"> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </div> <input type="button" id="target" value="click" /> </body> </html>

我希望能够单击“按钮”，它应该会打开一个带有下拉菜单的窗口，该菜单具有选择选项之一以及“确定”和“取消”按钮的能力。

但是，这似乎同时显示按钮和菜单（没有弹出窗口），我也不确定如何添加ok和取消按钮，有什么想法吗？

我尝试在html代码中使用onclick机制，然后实际上在javascript部分中使用函数，但这并没有真正的帮助。

Answer 1

这里是对话框文档。
看看，有所有方法和选项来定制您自己的.dialog

  $("#dialog").hide(); $("#target").click(function() { $("#dialog").show(); $("#dialog").dialog(); }); $('#formBrands').submit(function(){ $("#dialog").dialog('close'); });

 .button { background-color: #52B3D9; color: white; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="dialog" title="Basic dialog"> <form id="formBrands" method="post" action="yourPHP.php"> <select name="brands"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <input type="submit" value="OK" /> </form> </div> <input type="button" id="target" value="click" />

Answer 2

我将三件事添加到您的代码中，它对我有用。

jQuery库。
jQuery UI库。
将JavaScript代码包装在$(document).ready() 。

这是代码：

HTML：

<div id="dialog" title="Basic dialog">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>
<input type="button" id="target" value="click" />

Javascript：

$(document).ready(function() {
  $("#dialog").hide();
  $("#target").click(function() {
    $("#dialog").show();
    $("#dialog").dialog();
  });
});

您可以在jsFiddle上检查正在运行的版本。

下拉菜单显示不正确

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-10-31 19:52:19

解决方案2
0 2016-10-31 20:01:31

下拉菜单显示不正确

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-10-31 19:52:19

解决方案2 0 2016-10-31 20:01:31

解决方案1
0 已采纳 2016-10-31 19:52:19

解决方案2
0 2016-10-31 20:01:31