Question

我尝试使用javascript，而我是初学者。当我从上一个下拉菜单中更改了值时，我尝试添加一个下拉菜单。我希望在前一个具有值时显示完全相同的下拉菜单。因此，当您有3个带有值的下拉菜单时，您有4个下拉菜单，其中包含相同的选项等。

所以我像这样使用oninput：

<select name="select" oninput="myFunction()">

这是我在w3schools中使用的功能：

function myFunction() {
    document.getElementById("demo").innerHTML = "<tr><td>
    <select name='select' id='test' oninput='myFunction()'>
     <option value='test'>test</option> 
     <option value='test'>test</option>
     </select></td></tr>";
}

这是demo ID：

<table><div id="demo"> </div></table>

但我有两个问题。

当试图使用它时，它不会工作。但是当我使用时它确实有效：

document.getElementById("demo").innerHTML = "test"

这并没有显示相同的下拉菜单，因为我在for中有原始下拉菜单的选项，但是我不能将<div id="demo"> </div>放在for循环中，因为它会显示下拉菜单中有多少选项。

我的问题：

有没有办法在javascript函数中生成完全相同的下拉菜单？

如果没有，我的代码出了什么问题。

Answer 1

你必须使用jQuery ajax。将您的下拉列表放在html中（例如dropdown.html）

然后使用：

$("#id_of_first_dropdown").change(function(){
  $("#div_where_u_want_new_select").load("path/to/dropdown.html", function(){
      $("#div_where_u_want_new_select").fadeIn();
  });
});

在html中：

<select name="...">
  <option>..</option>
</select>
<div id="div_where_u_want_new_select"></div>

CSS：

#div_where_u_want_new_select {
  display: none;
}

dropdown.html中的

<select name="...">
  <option>..</option>
</select>

有了它，你只能使用它一次..如果你想这个使用无限制，那么可能的答案之一是改变js：

   $("#id_of_first_dropdown").change(function(){
      $.ajax({
         url: "path/to/dropdown.html",
         success: function(data){
             $("#div_where_u_want_new_select").append(data);
             $("#div_where_u_want_new_select").fadeIn();
         }
      })
   });

HTML：

    <select name="...">
      <option>..</option>
    </select>
    <div id="div_where_u_want_new_select0"></div>

和dropdown.html

<select name="...">
  <option>..</option>
</select>

当前一个下拉菜单选择了某些内容时，javascript显示下拉菜单

1 个答案: