Question

长时间偷看，第一次海报。

我发现这里有一个很棒的片段，在从下拉菜单中选择一个选项后会出现一个表单文本输入。它就像一个魅力，每个选项现在都有一个与之相关的输入。现在我需要调整js以使选项二出现两个主题，选项三出现三个主题，超过五个主题。目前，每个选项都会显示一个文本框。因此，在选项2中，我需要＆＃39; text1＆＃39;和＆＃39; text2＆＃39;出现，在选项3我需要＆text 39＆＃39;文本2＆＃39;和＆＃39; text3＆＃39;出现，等等。

如果我不清楚，请告诉我。这是我正在与之合作的内容。

<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？＆＃34;直列＆＃34; ：＆＃34;无＆＃34 ;;       document.getElementById（＆＃39; text1＆＃39;）。style.display = display;

var display = this.selectedIndex == 1？＆＃34;直列＆＃34; ：＆＃34;无＆＃34 ;;    document.getElementById（＆＃39; text2＆＃39;）。style.display = display;

var display = this.selectedIndex == 2？＆＃34;直列＆＃34; ：＆＃34;无＆＃34 ;;    document.getElementById（＆＃39; text3＆＃39;）。style.display = display;

}    ＆＃39;＆＃39;

感谢您的时间。

Answer 1

我确信有人可以改进，但它应该有效：

document.getElementById('combo').onchange = function() {
    // first reset all to hidden
    document.getElementById('text1').style.display = 'none';
    document.getElementById('text2').style.display = 'none';
    document.getElementById('text3').style.display = 'none';

    // then switch case to show the required boxes
    switch(this.selectedIndex){
        case 0:
            document.getElementById('text1').style.display = 'inline';
            break;
        case 1:
            document.getElementById('text1').style.display = 'inline';
            document.getElementById('text2').style.display = 'inline';
            break;
        case 2:
            document.getElementById('text1').style.display = 'inline';
            document.getElementById('text2').style.display = 'inline';
            document.getElementById('text3').style.display = 'inline';
            break;
        default:
            break;
    }
}

Answer 2

这应该适合你：

＆＃13;

$('#combo').change(function(){
    $('#myOptionsDiv').html(''); //added this to clear the div before setting inputs
    var num =$(this).val();
    for(var i = 0; i < num; i++){
      $('#myOptionsDiv').append('<input type="text" class="myInputs" /><br>');
      }
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id='combo'>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id="myOptionsDiv">  </div>

＆＃13;

如果您想访问这些字段，可以这样做：

var firstInputValue = $('.myInputs:eq(0)).val(); //use 0 in :eq() because arrays start at 0

var secondInputValue = $('.myInputs:eq(1)).val();

Answer 3

我会通过循环在纯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';
        }
    }

}

Answer 4

尝试将其更改为for循环。这可能不起作用，但你明白了。

document.getElementById('combo').onchange = function() {

    for (var i = 0; i <= this.selectedIndex; i++) {
        var display = this.selectedIndex == i ? "inline" : "none"; document.getElementById('text'+(i+1)).style.display = display;
    }

}

选择选项后如何显示多个表单输入

4 个答案: