Question

我正在尝试在javascript中生成的html中加载以下选项。

HTML：

<button type="submit" onClick="input(data)">Add</button>


<select id="processSelect" name="process">
</select>

Javascript：

function input(input){
   //my code
    createOptionsSelectProcess(arrayResponse);
}
function createOptionsSelectProcess(arrayResponse){
    var html = '';
    var arrayLength = arrayResponse.length;
    for (var i = 0; i < arrayLength; i++) {
    html += '<option value="'+ arrayResponse[i] +'">' + arrayResponse[i] 
    + '</option>';
    }
    document.getElementById("processSelect").innerHTML = html;
}

但是，我在调试中观察到的结果是这些选项是在select中生成的，但是在执行完成后它们会消失。有人知道原因吗？

Answer 1

按钮类型“提交”将提交表单并刷新页面，使用

<button type="button" onClick="input(data)">Add</button>

默认情况下，按钮的类型也是“提交”，因此，如果您不输入该按钮，它仍将提交表单。

Answer 2

您不需要功能input(input)。您可以使用事件监听器submit提交表单。

document.addEventListener('submit', () => createOptionsSelectProcess(data))

function createOptionsSelectProcess(arrayResponse) {
    var html = '';
    var arrayLength = arrayResponse.length;
    for (var i = 0; i < arrayLength; i++) {
    	html += '<option value="'+ arrayResponse[i] +'">' + arrayResponse[i] + '</option>';
    }
    document.getElementById("processSelect").innerHTML = html;
}

<form>
  <button>Add</button>
  <select id="processSelect" name="process"></select>
</form>

您可以使用<button>Add</button>或<input type="submit" value="Add">。他们俩都将提交没有onClick属性的表单。

如何使选项动态显示在选择中？

2 个答案: