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

javascript show dropdown menu when the previous dropdow menu has selected something

本文关键字：下拉菜单 javascript 显示 上一个 选择      更新时间：2024-04-09

我正在尝试使用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>

但我有两个问题。

  1. 当尝试使用这个时，它不会起作用。然而，当我使用时，它确实有效：

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

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

我的问题：

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

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

您必须使用jQuery ajax。将您的下拉列表放在html中（例如下拉列表.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>
相关文章：