javascript - 弹出窗口内的下拉列表(按下按钮时出现)

Question

目前我正在尝试创建一个按钮，该按钮创建一个弹出框，该弹出框又具有一个下拉列表，例如 here .但是，我无法弄清楚如何将下拉列表放在弹出窗口中。谁能帮忙？

我目前有一个带有表单的弹出窗口，但我想将此表单更改为下拉列表。引用这个jsfiddle

<p>Do you have an agreement or a conflict?</p>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var person = prompt("Please enter your name", "");

}
</script>

Answer 1

这是一个可能的演示解决方案。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

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