创建一个弹出窗口并使用 javascript 显示单选按钮列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18114004/
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
create a pop-up window and display a list of radio buttons using javascript
提问by user1499220
I'm writing on a js file. Here is what I've tried so far. (My code is a bit long but here is what I'm trying to do)
我正在写一个 js 文件。这是我迄今为止尝试过的。（我的代码有点长，但这是我想要做的）
var popUpList= $ ('<input type="radio">A<br> <input type="radio">B<br> <input type="radio">C');
var showPopUpButton=$('<button type="button">Select a Letter</button>');
// showPopUpButton is appended to the body
showPopUpButton.click(function() {
alert(popUpList);
});
When I click on showPopUpButton, the alert window shows [object Object], which I guess means that the variable popUpList is empty. I couldn't find how to do that in javascript.
当我单击 showPopUpButton 时，警报窗口显示 [object Object]，我猜这意味着变量 popUpList 为空。我在 javascript 中找不到如何做到这一点。
I also tried with jQuery as suggested here Create a popup with radio box using js
我也按照这里的建议尝试使用 jQuery Create a popup with radio box using js
var popUpList= $ ('<input type="radio">A<br> <input type="radio">B<br> <input type="radio">C ');
showPopUpButton.click(function() {
popUpList.dialog();
});
Now, the buttons are displayed but not inside a pop-up window! And they are all superposed. Any help will be appreciated.
现在，按钮显示但不在弹出窗口内！而且都是叠加的。任何帮助将不胜感激。
Thanks!
谢谢！
回答by cychoi
You need to wrap your <input>s in a container element, e.g.: <div>, because dialog()works on a single element.
您需要将<input>s包装在容器元素中，例如: <div>，因为dialog()适用于单个元素。
In your code, you are asking the dialog()function to work on multiple DOM objects and thus it will fail.
在您的代码中，您要求该dialog()函数处理多个 DOM 对象，因此它将失败。
Here is the code:
这是代码：
var popUpList = $('<div><input type="radio">A<br><input type="radio">B<br><input type="radio">C</div>');
showPopUpButton.click(function() {
popUpList.dialog();
});
See it in action here. Try it yourself. :)
在这里查看它的实际效果。自己试试吧。:)
回答by Christopher Marshall
Changed your inputs to HTML string, parsing as HTML and inserting inside the #dialog element.
将您的输入更改为 HTML 字符串，解析为 HTML 并插入到 #dialog 元素中。
var popUpList= '<input type="radio">A<br> <input type="radio">B<br> <input type="radio">C',
dialogHtml = $.parseHTML(popUpList);
showPopUpButton.click(function() {
$( "#dialog" ).html(dialogHtml).dialog();
});
