使用 javascript 创建一个弹出窗口并显示单选按钮列表

Question

我正在写一个 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);
   });

当我点击showPopUpButton时，警告窗口显示[object Object]，我猜这意味着变量popUpList是空的。 我在 javascript 中找不到如何做到这一点。

我也按照这里的建议尝试了 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();
       });

现在，按钮显示，但不在弹出窗口内！而且都是叠加的。 任何帮助将不胜感激。

谢谢！

Answer 1

您需要将<input>s 包装在一个容器元素中，例如：<div>，因为dialog() 适用于单个元素。

在您的代码中，您要求 dialog() 函数处理多个 DOM 对象，因此它将失败。

代码如下：

var popUpList = $('<div><input type="radio">A<br><input type="radio">B<br><input type="radio">C</div>');

showPopUpButton.click(function() {
    popUpList.dialog();
});

看到它在行动here。自己试试。 :)

Answer 2

将您的输入更改为 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();
   });