Question

我想要一个选择列表，它会增加或减少它下面的文本框数量，用户将在选择列表中选择2，而不是2个文本框应该出现，如果他选择3比3，我需要代码在html和js。

    <!DOCTYPE html>
<html>
<head>
 <title>MAIN</title>
</head>
<script>

function onchange_action(){

  var e=document.getElementsByName("AuthoringForm")[0];
  for(j=1; j<(e.value)+1; j++){

    var x = document.getElementById((j).value);
    console.log(j);
        x.style.display = "none";

    }   
  }


</script>

<body>

<form>
<div id="1">
  <input type="text">hello</input>
</div>
<div id="2">
  <input type="text">hello</input>
</div>
<div id="3">
  <input type="text">hello</input>
</div>
<div id="4">
 <input type="text">hello</input>
</div>
</form>

<select name="AuthoringForm" property="disease_name" size="1" 
onchange="onchange_action();">
    <option selected="selected"> Select Number of Products </option> 
    <option value="1">1</option>
    <option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>


</body>
</html>

这是我试过的，但没有工作。

Answer 1

解决!!!

<!DOCTYPE html>
<html>
 <head>
<title>MAIN</title>
</head>
<script>

function onchange_action(){

var e=document.getElementsByName("AuthoringForm")[0];
for(j=1; j<= e.value; j++){

    document.getElementById(j).style.display='block';

}   

for(; j<5; j++){
document.getElementById(j).style.display='none';    
   }
  }


</script>

<body>

<form>
<div id="1">
  <input type="text">hello</input>
</div>
<div id="2">
  <input type="text">hello</input>
</div>
<div id="3">
  <input type="text">hello</input>
</div>
<div id="4">
  <input type="text">hello</input>
</div>
</form>

<select name="AuthoringForm" property="disease_name" size="1" 
onchange="onchange_action();">
    <option selected="selected"> Select Number of Products </option> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>


</body>
</html>

：）

使用选择列表的多个文本框

1 个答案: