如何在对话框中动态添加元素答案

【问题标题】：How to add elements dynamically inside a dialog box如何在对话框中动态添加元素
【发布时间】：2021-07-28 12:09:26
【问题描述】：

我正在努力寻找一种在对话框中动态创建元素的方法。如何动态地为选择元素创建选项元素？（其中 select 是在 HTML 中创建的）。我的对话框在我的 HTML 文件中是这样创建的：

<div id="update_dialog" title="Update Info" style="display: none; ">
   <form >
      <p>Name:<input type="text" name="name" id="dNameId"/></p>
      <p> Province:
          <select id="dprovince">
          </select>
      </p>
    </form>
</div>

以下是动态创建这些元素的函数。如何动态地为我的对话框实现这个例程？

function dialogloadProvinceAndTownList(array1, array2){    
var provinceSlt =document.getElementById('dprovince');
for(var i = 0; i< array1.length; i++){
    var _provinceSlt =document.createElement('option');
    _provinceSlt.value = array1[i];
    _provinceSlt.text = array1[i];
    provinceSlt.appendChild(_provinceSlt);
}   
for(var i = 0; i< array2.length; i++){   
var townSlt =document.getElementById('dtowns');
    var _townSlt =document.createElement('option');
        _townSlt.value = array2[i];
        _townSlt.text = array2[i];
        townSlt.appendChild(_townSlt);
  }
}

这就是我在 JavaScript 中调用对话框的方式：

function loadUpdate_dialog(){
    
$('#update_dialog').dialog({
    modal: true,
    width: 345,        
    overlay: {
        opacity: 0.7,
        background: "black"
    },
    buttons: {
        "Update": function() {
            updateEmployeeInfo();
            $(this).dialog('close');                
        },
        "CANCEL": function() {
            $(this).dialog('close');
        }
        ,
        "Preload Required Data" : function (event, ui) {
            $("#dNameId").val(updateName);
            $("#dSurnameId").val(updateSurname);
            $("#dUsId").val(updateUserId);
            $("#dEmailId").val(updateEmail); 
        }
    }
  });
}

【问题讨论】：

标签： javascript html jquery firebase

【解决方案1】：

您是否尝试在显示对话框之前在loadUpdate_dialog() 中调用dialogloadProvinceAndTownList(array1, array2)？

此外，如果您想在选择元素中使用不同的值多次调用对话框，请将其添加到 dialogloadProvinceAndTownList

$(provinceSlt).html('');
$(townSlt).html('');

【讨论】：

好的，彼得。我将尝试在 loadUpdate_dialog() 中运行它。但现在告诉我，我必须包含 $(provinceSlt).html('');和 $(townSlt).html('');在那些循环里面？
你需要把$(provinceSlt).html('');放在var provinceSlt =document.getElementById('dprovince');和$(townSlt).html('');的声明后面var townSlt =document.getElementById('dtowns');后面

【解决方案2】：

该代码发生了很多事情，因此不确定是什么/哪里出了问题，但这里是动态添加选项到选择元素的必要元素/功能的准系统版本：

const select = document.getElementById('select');
for(let i = 0; i < 5; i++){
 let option = document.createElement('option');
 option.textContent = `Option ${i}`;
 select.append(option);
}

&lt;select id="select"&gt;&lt;/select&gt;

【讨论】：

例程工作正常，但不知道在哪里以及如何适合弹出对话框。

【解决方案3】：

这是对@Peter suib 输入的确认。我像这样在对话例程中调用了该方法，尽管彼得在我调用对话之前运行例程的想法也有效。所以我做了如下;

function loadUpdate_dialog(array1, array){
//Peter I did a test call as you suggested, calling it here too and
//it worked too.

//dialogloadProvinceAndTownList(array1, array); 

$('#update_dialog').dialog({
    modal: true,
    width: 345,
    
    overlay: {
        opacity: 0.7,
        background: "black"
    },
    
    'TryIt':dialogloadProvinceAndTownList(array1, array),
    
    buttons: {
        "Update": function() {
            updateEmployeeInfo();
            $(this).dialog('close');
        },
        "CANCEL": function() {
            ....
        }
        ,
        "Preload Required Data" : function (event, ui) {
            .... 
        }
    }
  });   
 }

但没有找到任何参考这样做的文档。如果有人有任何关于如何使用包含此类功能的对话框的参考资料。请参考我。

【讨论】：