如何打开与下拉菜单[选择标签]

Question

我会尽量具体地新的动态形式。我有一个下拉菜单[选择标签]这使用户能够选择5个选项;即从1到5的数字。现在取决于所选择的选项，我希望显示一个具有与所选选项相同数量的输入标签的新表格。

因此，如果用户从下拉菜单中选择3，则子表格将出现在显示三个输入标签的底部。代码：

<select id="formName9" name="blockUnits"> 
<option selected="selected" value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
</select> 

Answer 1

我支持詹姆斯·唐纳利的答案。如果你希望它是纯Java脚本，您可以使用此方案。

HTML

<select id="formName9" name="blockUnits" onchange="addInput()"> 
    <option selected="selected" value="1" >1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    </select> 
    <form> 
    <div id="newAdd"> </div>. 
    </form> 

JAVASCRIPT

function addElement() { 
    var element = document.createElement("input"); //creating input 
    element.setAttribute("value", "");//setting its value 
    element.setAttribute("name", "newInput");//naming the input 
    var foo = document.getElementById("newAdd"); 
    foo.appendChild(element);//appendign the value into the parant div 
} 
function addInput(){ 
    document.getElementById("newAdd").innerHTML="";//clearing the div 
    var noInp=parseInt(document.getElementById("formName9").value); 
     while(noInp>0) 
     { 
     addElement(); 
      noInp--; 
     }   
    } 

这里是JSFIDDLE

Answer 2

您可以使用Ajax呼叫，并且响应添加到DOM，或者直接添加使用JS的DOM。

对于直接DOM，somethink样（使用jQuery）：

$('#formName9').on('change', function() { 
    var selected = $(this).val(); 
    $('#aDomElement').empty(); 
    for (var i=1; i<=selected; i++) { 
     $('#aDomElement').append(
      $('<div id="'+i+'">').html(
        $('<input>').attr('name', 'input'+i).attr('type', 'text') 
      ) 
     ); 
    } 
}); 

凡aDomElement是现有的HTML元素的ID。

Answer 3

你会利用on change事件侦听器：

$('select#formName9').on('change', function() { 
    /* Remove the existing input container, if it exists. */ 
    $('form#container').remove(); 

    /* Get the selected value and create the new container. */ 
    var val = $(this).val() 
     $container = $('<form id="container"></form>'); 

    /* Loop through creating input elements based on value. */ 
    for(i=0;i<val;i++) 
    { 
     /* Create the new input element. */ 
     var $input = $('<input type="text"/>'); 

     /* Append this input element to the container. */ 
     $input.appendTo($container); 
    } 

    /* Add container to the page. */ 
    $container.insertAfter($(this)); 
}) 

JSFiddle example。

然后，您可以在此扩大到添加基于最初selected选项默认输入：

Extended JSFiddle。

Answer 4

$('select#formName9').on('change', function() { 
var ddVal=$(this).val(); 
for(i=0;i<ddVal.length;i++) 
{ 
$("#FORMPOSITION").append("<input type='text' name='ddG"+i+"' id='ddVL"+i+"'>"); 
} 
}); 

考虑执行前的引号。

Answer 5

我尝试和努力。试试看：

 $(document).ready(function() { 
      $('#formName9').change(function() { 
       var number = parseInt($('#formName9').val()); 
       if(number == 3) { 
        alert('3 HERE'); 
       } 
      }); 
     }); 

Answer 6

下面是一个使用jQuery和CSS的动态示例。我提供一个working jsFiddle.

这是基本的想法，你可以工作过的这一点，如果需要增加更多的投入。

HTML：

<select id="formName9" name="blockUnits"> 
    <option selected="selected" value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 
<div id="form1" class="hiddenForm form">Form 1</div> 
<div id="form2" class="hiddenForm form">Form 2</div> 
<div id="form3" class="hiddenForm form">Form 3</div> 
<div id="form4" class="hiddenForm form">Form 4</div> 
<div id="form5" class="hiddenForm form">Form 5</div> 

的jQuery：

$("#form1").show() 
$("#formName9").change(function() { 
    var form = "#form" + $(this).val(); 
    $(form).siblings(".hiddenForm").hide() 
    $(form).show(); 
}); 

CSS：

.form { 
    padding: 10px; 
    border: 1px dotted #000; 
    margin: 5px; 
} 
.hiddenForm { 
    display: none; 
}