JQUERY：根據選擇框的值

HTMLJQUERY：根據選擇框的值

<select name="select" id="select"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 
<br> 
<input id="bla" type="text" name="attendant[]">

JQuery的

$("select").change(function() { 

    var select = parseFloat($('#select').val()); 
    $('#bla').after('<br><input id="bla" type="text" name="attendant[]">'); 

});

傢伙喜對形式的文本輸入，在改變選擇框更新號，上面是我創建的代碼。我需要更改上的選擇框來更新基於選擇框的值的表單字段數。如果用戶更改爲4，則應在屏幕上顯示4個表單字段。如果值更改爲1，則屏幕上應該只有一個值。

JQuery剛剛開始幾天前不太好，所以任何幫助表示讚賞。

謝謝

這是我工作的JSFiddle。 http://jsfiddle.net/andrewvmail/b5Gqg/3/

來源

2012-11-15 momoterraw

試試這個

HTML

<select name="select" id="select"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 
<br> 
<div class="template" style="display:none"> 
    <input type="text" name="attendant[]" /> 
</div> 
<div id="container" > 

</div>

的Javascript

$("select").change(function() { 

    var select = parseInt($('#select').val() , 10); 
    var $clone = $('.template').clone().html(); 
    console.log($clone); 
    var html = ''; 
    for(var i = 0;i< select ; i++){ 
     html += $clone; 
    } 
    $('#container').empty().html(html); 
}).change();

可以達到同樣不使用.clone() ..這是不必要的...

$("select").change(function() { 

    var select = parseInt($('#select').val() , 10); 
    var $clone = $('.template').html(); 
    var html = ''; 
    while(select > 0){ 
     html += $clone; 
     select--; 
    } 
    $('#container').empty().html(html); 
}).change();

Check Fiddle

Without clone

來源

2012-11-15 06:02:19

我想你們誤會我......我需要更新表單字段的頁面數的onChange選擇框的表單字段不是值。 – momoterraw

@Jangui ..檢查編輯過的文章 –

感謝這個作品不錯！爲什麼你需要做console.log（$ clone），爲什麼在var select的末尾有10個。那麼空函數是如何工作的？只是試圖理解代碼中發生了什麼。哦，爲什麼你需要顯示：無？ – momoterraw

嘗試此

$("select").change(function() { 

var fieldParent=$('#fields_parent'); 

$(fieldParent).children().remove(); 

for(var i=0;i<parseInt($(this).val());i++) 
{ 
     $('<input type="text" id="txtInput_' + i + '"></input>').appendTo(fieldParent); 
}

}）;

在jsfiddle上更新了相同的內容。

來源

2012-11-15 06:12:35

小提琴：http://jsfiddle.net/b5Gqg/6/

var bla = $('#bla'); 
$("select").change(function(){ 
    var len = parseInt($(this).val()); 
    $('input').remove(); 
    while(len--) bla.clone().insertAfter('select'); 
});

來源

2012-11-15 06:15:26 kayen

JQUERY：根據選擇框的值

回答

相關問題