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

我根据您寻找解决方案的问题创建了JSFiddle。这是JSFiddle DEMO。

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

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

Answer 2

您正在使用提示，这是输入的所有browser的默认设置。

如果您想要弹出选择下拉列表，则必须创建自定义弹出窗口。

使用DEMO BootStrap model 。

Answer 3

当dropbox change事件触发捕获所选项目并执行您的工作或只使用this

时

<div id="dialog" title="Basic dialog"> <p id="dropdownselectitem"> </p> </div>  <select id="dd">  <option value="Select Cars...">Select Cars...</option>   <option value="volvo">Volvo</option>   <option value="saab">Saab</option>   <option value="mercedes">Mercedes</option>   <option value="audi">Audi</option> </select>

$( "#dialog" ).hide();
$( "#dd" ).change(function() {
$('#dropdownselectitem').html($('#dd').val());
      $( "#dialog" ).show();
    $( "#dialog" ).dialog();
});

弹出窗口内的下拉列表（按下按钮时出现）

3 个答案: