下拉菜单显示不正确

Question

I'm trying to make a simple dropdown menu, and add 'ok' and 'cancel buttons. 我正在尝试制作一个简单的下拉菜单，并添加“确定”和“取消”按钮。 I have the code: 我有代码：

  $("#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>

I want to be able to click on the Button, and it should open a window with a dropdown menu with the ability to select one of the options, and an ok and cancel button. 我希望能够单击“按钮”，它应该会打开一个带有下拉菜单的窗口，该菜单具有选择选项之一以及“确定”和“取消”按钮的能力。

However, this seems to display the button and the menu at the same time (no popup), and I'm also not sure on how to add ok, and cancel buttons to it, any ideas? 但是，这似乎同时显示按钮和菜单（没有弹出窗口），我也不确定如何添加ok和取消按钮，有什么想法吗？

I've tried using an onclick mechanisms in the html code and then actually using a function int the javascript portion, but that doesn't really help. 我尝试在html代码中使用onclick机制，然后实际上在javascript部分中使用函数，但这并没有真正的帮助。

Answer 1

Here the dialog documentation . 这里是对话框文档。
Take a look, there are all methods and options to custom your own .dialog 看看，有所有方法和选项来定制您自己的.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

I add 3 things to your code and it works for me. 我将三件事添加到您的代码中，它对我有用。

jQuery library. jQuery库。
jQuery UI library. jQuery UI库。
Wrap the javascript code in the $(document).ready() . 将JavaScript代码包装在$(document).ready() 。

Here is the code: 这是代码：

HTML: 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: Javascript：

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

You can check the running version on jsFiddle . 您可以在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