Javascript 基于多个下拉选择显示Div 1. 2. 3. 4. 5. 1. 2. 3.

如图所示，我有两个单独的下拉列表。我想这样做，如果他们选择main，它将显示main的div，文本框等于他们选择的数字（即4将显示4个主要文本框供他们填写），我知道怎么做。sub的问题来了，我希望他们为每个主选择显示一个与sub相等的文本框（即，如果main为3，sub为3，则3个主文本框中的每个文本框后面都会有3个子文本框）我可以让它显示3或全部，但我不知道如何使它去的主要和次要选择的基础上给我的确切领域，我正在寻找。我是否只需要在java脚本的函数中设置，如果main==x，则在sub的函数上显示xyz？

为了完成此任务，您必须：

• 在每次选择时使用

  change

  事件
• 利用每个选项上的

  值

  属性

演示：

const mainSelect=document.querySelector（'select[name=“main”]”）；
const subSelect=document.querySelector（'select[name=“sub”]”）；
const resultsDiv=document.getElementById（“结果”）；
mainSelect.addEventListener（“更改”，事件=>{
handleChange（事件）；
});
subSelect.addEventListener（“更改”，事件=>{
handleChange（事件）；
});
函数句柄更改（事件）{
让textboxs=“”；
让mainCount=Number（mainSelect.value）；
设subCount=编号（subSelect.value）；
for（设i=0；i”；
for（设s=0；s”
}
文本框+=t；
}
resultsDiv.innerHTML=`请填写${textboxs}`；
}

1.
2.
3.
4.
5.


1.
2.
3.

您可以在子选项中使用onchange：

函数createSubInput（选定）{
让mainSelectedValue=document.getElementById（'main'）.value；
for（设i=0；i

你能显示html吗？一开始我误解了你的问题。。请查看我的最新答案。。。

<select name="main">
  <option value="1">1</option>
  <option value="1">2</option>
  <option value="1">3</option>
  <option value="1">4</option>
  <option value="1">5</option>
</select>
<select name="sub">
  <option value="1">1</option>
  <option value="1">2</option>
  <option value="1">3</option>
</select>

<select name="sub" onchange="createSubInput(this)">

 function createSubInput (selected) {
      let mainSelectedValue = document.getElementById('main').value;

       for(let i=0; i< mainSelectedValue; i++) {
        for(let j=0; j< selected.value; j++) {
          // todo: create sub input by each main input
        }
      }
    }