如何打開與下拉菜單[選擇標籤]

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; 
}