1

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>
<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 に変更された場合、画面には 1 つしか表示されません。

数日前に始めたばかりの JQuery はあまり得意ではないので、助けていただければ幸いです。

ありがとう

これが私が取り組んでいる JSFiddle です。 http://jsfiddle.net/andrewvmail/b5Gqg/3/

4

3 に答える 3

1

これを試して

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();​

フィドルをチェック

クローンなし

于 2012-11-15T06:02:19.280 に答える
1

フィドル: 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-15T06:15:26.757 に答える
0

これを試して

$("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-15T06:12:35.307 に答える