創建一個彈出窗口並使用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，如此處建議的那樣使用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>包裹在一個容器元素中，例如： <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();
});

看到它在這里行動。 自己嘗試。 :)

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();
   });