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>

我希望能够点击按钮，它应该打开一个带有下拉菜单的窗口，可以选择其中一个选项，还有一个确定和取消按钮。

然而，这似乎同时显示按钮和菜单（没有弹出窗口），我也不确定如何添加确定，取消按钮，任何想法？

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

Answer 1

这里是dialog documentation 看一看，有自己定制.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

我在代码中添加了3个内容，它对我有用。

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上查看正在运行的版本。

DropDown菜单无法正确显示

2 个答案: