使用 Ajax 结果更新选择选项元素

Question

我有两个选择选项列表，其中包含从 db 检索的值。<select id="userid" onchange="selSuj()"><option value="1" selected="selected">text1</option><option value="2">text2</option><option value="3">text3</option></select><select id="subject"><div id="determineSubj"><option value="1" selected="selected">text1</option><option value="2">text2</option><option value="3">text3</option></div></select><script>function selSuj(){   var x = $('#userid').val();   $.ajax({      type:'POST',      url:'same page url',      data:{        'userid':x      },      success: function(result){      document.getElementById("determineSubj").innerHTML = result;      }   })   ;}the first select option(userid),when option selected, should populate the corresponding values in the second select option(subject), using the user option value(eg 1,2,3) as search p.key to the subject db. 我试过使用 ajax，它在警报（结果）上运行良好，但不更新第二个选择选项值。请帮忙。

Answer 1

Aselect不应包含<div>.

从这个简短的演示中我们可以看出，这样做会使 JavaScript 无法访问 div，因为它不认为它是 DOM 的有效部分：

document.addEventListener("DOMContentLoaded", function() {

  console.log(document.getElementById("determineSubj"));

});

<select id="subject">

  <div id="determineSubj">

    <option value="1" selected="selected">text1</option>

    <option value="2">text2</option>

    <option value="3">text3</option>

  </div>

</select>

无论如何，即使它是有效的，对于您的目的来说也完全没有必要。您可以直接更新元素的 HTML select。

将 HTML 更改为：

<select id="subject">

    <option value="1" selected="selected">text1</option>

    <option value="2">text2</option>

    <option value="3">text3</option>

</select>

以及“成功”回调：

success: function(result) {

  document.getElementById("subject").innerHTML = result;

}

而且不应该有任何问题。