javascript - 选择选项后如何使多个表单输入出现

Question

长期学习者，第一次海报。

我在这里发现了一个很棒的片段，在从下拉菜单中选择一个选项后，会出现一个表单文本输入。它就像一个魅力，现在每个选项都有一个与之关联的输入。现在我需要调整 js，使选项二出现两个主菜，选项三出现三个主菜，最多五个。目前，每个选项都会出现一个文本框。因此，在选项 2 中，我需要出现“text1”和“text2”，在选项 3 中，我需要出现“text1”、“text2”和“text3”，依此类推。

如果我不清楚，请告诉我。这是我正在使用的。

<select id='combo'>
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<input  id='text1' style='display: none'/>
<input  id='text2' style='display: none'/>
<input  id='text3' style='display: none'/> ''


<script>
document.getElementById('combo').onchange = function() {

var display = this.selectedIndex == 0 ? "inline" : "none"; document.getElementById('text1').style.display = display;

var display = this.selectedIndex == 1 ? "inline" : "none"; document.getElementById('text2').style.display = display;

var display = this.selectedIndex == 2 ? "inline" : "none"; document.getElementById('text3').style.display = display;

} ''

非常感谢您的宝贵时间。

Answer 1

我会通过循环在纯 JS 中执行此操作。这也使您能够在不编辑 JS 的情况下添加更多输入

http://jsfiddle.net/odj3pmtg/1

document.getElementById('combo').onchange = function() {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; ++i)   
    {
        if(i < document.getElementById('combo').value){
            inputs[i].style.display = 'inline';
        } else {
            inputs[i].style.display = 'none';
        }
    }

}