javascript 带有下拉列表和嵌入 textarea 的 JQuery 模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16337026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Modal Dialog with drop-down list and textarea embedded
提问by Oam Psy
I'm new to jQuery so forgive me if this is an easy question.
我是 jQuery 的新手，所以如果这是一个简单的问题，请原谅我。
I am trying to create a dialog box, from an onClick event, that comprises of:
我正在尝试从 onClick 事件创建一个对话框，其中包括：
1) A drop down list 2) A text area (height possibly 300px) 3) Yes/No buttons
1) 下拉列表 2) 文本区域（高度可能为 300 像素） 3) 是/否按钮
I have got to the stage where i can display a dialog with the Yes/No buttons, however i am struggling to include a dropdown and textarea field.
我已经到了可以显示带有是/否按钮的对话框的阶段，但是我正在努力包含下拉列表和文本区域字段。
Current code:
当前代码：
function placeOrder() {
if ($('#dialogDiv').length == 0) {
$('body').append("<div id='dialogDiv'><div/>");
}
var dialogDiv = $('#dialogDiv');
dialogDiv.attr("Title", "Are you sure you want to place this order.");
dialogDiv.html("Are you sure you want to place this order? Please select delivery option from the drop down and enter any special requirements in the text field.");
dialogDiv.dialog({
modal : true,
buttons : [
{
text : "Yes",
class : 'Green',
click : function() {
// Some functionality.
}
},
{
text : "No",
class : 'Red',
click : function() {
// Some functionality.
}
} ]
});
}
}
If there is a better way of structuring my dialog im happy to hear.
如果有更好的方式来构建我的对话，我很高兴听到。
Thanks
谢谢
-- UPDATE --------------------
- 更新 - - - - - - - - - -
Thanks - That seems to have work but are still a few issues.
谢谢 - 这似乎有工作，但仍然存在一些问题。
I have created the div element outside of the body tag, yet, when the page first loads, i can see the drop-down and text-area at the bottom of the page. Once the dialog appears, and the drop-down and text-areas are displayed in the dialog, yet, they disappear from the bottom of the page (As i expected on page load) upon clicking No.
我已经在 body 标签之外创建了 div 元素，但是，当页面第一次加载时，我可以看到页面底部的下拉菜单和文本区域。对话框出现后，下拉菜单和文本区域显示在对话框中，但单击否后，它们会从页面底部消失（正如我在页面加载时所预期的那样）。
I thought it was because i hadn't hid the div on page load, tried with:
我认为这是因为我没有在页面加载时隐藏 div，尝试使用：
$("#dialogDiv").hide();
Although that hides the div on PageLoad, when the dialog appears the drop-down and text-area are still hidden.
虽然这隐藏了 PageLoad 上的 div，但当对话框出现时，下拉菜单和文本区域仍然隐藏。
Updated function:
更新功能：
function placeOrder() {
if ($('#dialogDiv').length == 0) {
}
var dialogDiv = $('#dialogDiv');
dialogDiv.dialog({
modal : true,
buttons : [
{
text : "Yes",
class : 'Green',
click : function() {
// Some functionality.
}
},
{
text : "No",
class : 'Red',
click : function() {
// Some functionality.
}
} ]
});
Updated HTML:
更新的 HTML：
</body>
<div id="dialogDiv" title="Are you sure you want to place this order.">
<p>Are you sure you want to place this order? Please select delivery option from the drop down and enter any special requirements in the text field.</p>
Reason<select for="postage">
<option value="">Please select...</option>
<option value="00111">Fedex - 001</option>
<option value="00112">UPS - 002</option>
</select>
<textarea id="details" name="details" class=" type="text" maxlength="760"></textarea>
</div>
回答by Patrick D
Your JavaScript dialogcall is fine. In your HTML markup, outside of the bodytag, create a divelement that will wrap your dialog. With your divnow defined in the HTML markup, you can remove the lines of JavaScript with the append,attr,htmlcalls.
你的 JavaScriptdialog调用没问题。在您的 HTML 标记中，在body标签之外，创建一个div用于包装对话框的元素。使用您div现在在 HTML 标记中定义的内容，您可以删除带有append,attr,html调用的 JavaScript 行。
</body>
<div id="dialogDiv" title="Are you sure you want to place this order">
<!-- Define your textarea and select here as you normally would -->
<textarea/>
<select/>
</div>
</html>
With the HTML outside of the bodytag, this divwill be hidden until called by your dialogmethod. You can treat the textareaand selectas you would any other HTML element in your JavaScript code.
对于body标签之外的 HTML ，这div将被隐藏，直到被您的dialog方法调用。您可以像对待JavaScript 代码中的任何其他 HTML 元素一样对待textarea和select。
UPDATE:
更新：
Here's a JSFiddle for the answer: http://jsfiddle.net/zMs5n/
这是答案的 JSFiddle：http: //jsfiddle.net/zMs5n/
$("#dialogDiv").dialog({
autoOpen: false
});
// Open the dialog when the user clicks some button
$("#myButton").button().click(function() {
$("#dialogDiv").dialog("open");
});
Basically, you need to create the dialog()as soon as the page loads. JQuery UI, as part of the dialog initialization, will not display this divoutside of the dialog. Setting the autoOpenproperty to false will prevent the dialog from opening. At this point, you can call the dialog openfunction to open the dialog at your leisure.
基本上，您需要dialog()在页面加载后立即创建。JQuery UI，作为对话框初始化的一部分，不会div在对话框外显示。将该autoOpen属性设置为 false 将阻止打开对话框。此时，您可以随意调用dialogopen函数打开对话框。
回答by mauretto
You have to write the html code of select and textarea inside the dialogDiv div.
你必须在dialogDiv div中编写select和textarea的html代码。
