如何在对话框内动态添加元素

Question

我正在努力寻找一种在对话框中动态创建元素的方法。 如何为选择元素动态创建选项元素？ （其中选择是在 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); 
        }
    }
  });
}

Answer 1

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

此外，如果您想在 select 元素中使用不同的值多次调用对话框，请在dialogloadProvinceAndTownList添加它

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

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

 <select id="select"></select>

Answer 3

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

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) {
            .... 
        }
    }
  });   
 }

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