根据所选数量生成选择选项

Question

我有一个选择选项，显示值1到5。根据选择的值，它将基于选择的编号生成选择选项。假设我选择3，那么它将生成3选择选项。可能在jquery中循环ajax像这样这是我的div

<select name="noAffected" class="form-control noAffected" id="noAffected" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

<div class="form-group affectedsec1" id="affectedsec1">
<div>
<div class="form-group affectedsec2" id="affectedsec2">
<div>
<div class="form-group affectedsec3" id="affectedsec3">
<div>
<div class="form-group affectedsec4" id="affectedsec4">
<div>

下面是我的jQuery

    $(".noAffected").change(function(){
        var val=$(this).val();
        alert(val);
        for (var i = 1; i < val; i++) 
        {
            alert(i);
            $.ajax
            ({
                type: "POST",
                url: "getdata.php",
                data: {i:i},
                cache: false,
                success: function(data)
                {
                $(".affectedsec"+i).html(data);
                }
            });
        }  


    });

此ajax可以通过单次调用ajax来完成。但是我想知道是否有一个循环..下面是我的getdata.php

$rows = $progs->fetchAll();

    echo '<label class="col-sm-3 control-label">Section '.$_POST["i"].'</label>';
    echo '<div class="col-sm-9">';
    echo '<select name="affectsec'.$_POST["i"].'" class="form-control '.$_POST["i"].'" id="affectsec'.$_POST["i"].'" required>';
    echo '<option value="">Section</option>';

foreach($rows as $row)
{ 
    echo '<option value="'.$row['dpt_id'].'" >'.$row['dpt_name'].'</option>';
}
    echo '</select>';
    echo '</div>';

Answer 1

不要循环ajax请求。而是在PHP文件中循环。

HTML：

<select name="noAffected" class="form-control noAffected" id="noAffected" required>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<div id="output"></div>

JQUERY：

<script>
$("#noAffected").on('change', function(){
    $.ajax({
        type: "POST",
        url: "getdata.php",
        data: { value: $(this).val() },
        cache: false,
        success: function(data) {
            $("#output").html(data.html);
        }
    });
});
</script>

PHP：

<?php $rows = $progs->fetchAll();

ob_start();
    $ctr = 1;
    foreach ($_POST['value'] as $v) { ?>
        <div class="form-group affectedsec<?php echo $ctr; ?>" id="affectedsec<?php echo $ctr; ?>">
            <label class="col-sm-3 control-label">Section <?php echo $ctr; ?></label>
            <div class="col-sm-9">
                <select name="affectsec<?php echo $ctr; ?>" class="form-control <?php echo $ctr; ?>" id="affectsec<?php echo $ctr; ?>" required>
                    <option value="">Section</option>
                    <?php foreach($rows as $row) { ?>
                        <option value="<?php echo $row['dpt_id']; ?>"><?php echo $row['dpt_name']; ?></option>
                    <?php } ?>
                </select>
            </div>';
        </div>
<?php
    $ctr++;
    }
$html = ob_get_contents();
ob_end_clean();

wp_send_json(['html' => $html]);