Question

我想通过javascript基于主下拉菜单更新我的下拉菜单。

考虑一下：有一个主要的选择菜单（下拉列表）有几个月，从1月到12月，我们有3个其他块，但在这些块中有月份选择，但是，在这种情况下，它们应该选择与在主要选择中选择的同月。我不知道我是否清楚。 如果我更改主要选择，则应反映在其他3。

我不明白如何开始，因为我可以把一些＆＃34; onChange＆＃34;主要选择调用javascript函数的事件，但我不知道这个javascript代码如何更改网页其他3个块中其他3个年份选择的值。

我是用手机写的，因为我在火车上很遗憾，我没有任何代码可以与你分享，因为我只能把工作做成了＆＃34; OnChange＆＃34;事件

请提出一些解决方案。提前谢谢。

Answer 1

你有正确的开始。
通过侦听主要选择中的更改，从数据中获取相应的字段，以便为子选择创建新选项这是一个例子。希望可以提供帮助。

＆＃13;

let data ={
  opt1 : { 
    child1 : ["opt1-child1-1","opt1-child1-2"],
    child2 : ["opt1-child2-1","opt1-child1-2"],
    child3 : ["opt1-child3-1","opt1-child1-2"],
  },
  opt2 : { 
    child1 : ["opt2-child1-1","opt2-child1-2"],
    child2 : ["opt2-child2-1","opt2-child1-2"],
    child3 : ["opt2-child3-1","opt2-child1-2"],
  }
};
$("#main").on('change',function(){
  let main = $(this).val();
  console.log(main);
  
  //set child1
  $("#child1").html(""); //clean
  data[main].child1.forEach(ele => {
    $("#child1").append(`<option value="${ele}">${ele}</option>`);
  });
    //set child2
     $("#child2").html(""); //clean
  data[main].child2.forEach(ele => {
    $("#child2").append(`<option value="${ele}">${ele}</option>`);
  });
  //set child3
   $("#child3").html(""); //clean
  data[main].child3.forEach(ele => {
    $("#child3").append(`<option value="${ele}">${ele}</option>`);
  });
      
});

＆＃13;

<div>
<select id="main">
<option disabled selected>---Pick one---</option>
  <option value="opt1">opt1</option>
  <option value="opt2">opt2</option>
</select>
</div>
<select id="child1">
  <option disabled selected>---choose main first---</option>
</select>

<select id="child2">
  <option disabled selected>---choose main first---</option>
</select>

<select id="child3">
  <option disabled selected>---choose main first---</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＆＃13;

由一个主选择控制的形式的各种选择

1 个答案: