Question

在下面的代码中显示了动态字段“Childs”。用户应该选择孩子的数量。

选择1个孩子应该打开一个新的领域来放入孩子的年龄。选择2个孩子应该打开2个字段，依此类推。

相反，我的代码为1个孩子打开2个字段，为2个孩子打开3个等等。

$(document).ready(function() {
    $('#id_NOA').change(function(){
        var total = $(this).val();
        $('.app_rate').each(function(index){
            if (index != 0) $(this).remove();
        });
        for (var i = 0; i <= total; i++)
        {
            $('.app_rate:first').append("Age" + i + "&nbsp;<select name=age_child" + i + "><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option></select>");
        }
    });
});

Answer 1

在1开始你的迭代器，就像这样

for (var i = 1; i <= total; i++)

这样你的编号也是正确的。

Answer 2

在i <= total声明中将i < total更改为for。

Answer 3

这就是你想要的。它会记住用户的选择。

$(document).ready(function() {
    $('#id_NOA').change(function(){    		
        var total = $(this).val();
        var ages = [];
        $('.app_rate select').each(function(index){           		
            ages.push($(this).val())      
        });
        $(".app_rate").html("");
        for (var i = 1; i <= total; i++)
        {
            $('.app_rate:first').append("Age" + i + "&nbsp;<select class=select" + i + " name=age_child" + i + "><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option></select>");
            $(".select"+i).val(ages[i-1]);                
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label for="id_NOA">Childs</label>
    <select name="NOA" id="id_NOA">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>
<div class="app_rate"></div>

动态下拉列表打开新字段

3 个答案: