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中找不到如何做到这一点。

我也按照Create a popup with radio box using js

的建议尝试了jQuery

var popUpList= $ ('<input type="radio">A<br> <input type="radio">B<br> <input type="radio">C ');
    showPopUpButton.click(function() {
          popUpList.dialog();
       });

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

谢谢！

Answer 1

您需要将<input>包装在容器元素中，例如：<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();
   });

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

2 个答案: