根据选择的数量生成选择选项答案

【问题标题】：Generate select option based on the number of selected根据选择的数量生成选择选项
【发布时间】：2020-02-24 10:26:23
【问题描述】：

我有一个选择选项，显示值 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>';

【问题讨论】：

有什么问题？
ajax 的循环不起作用
你的结束
标签不正确
你为什么要在客户端循环？如果你问我，让 x 个单独的 AJAX 请求毫无意义。为什么不直接将要生成的number 个选择字段发送到服务器，然后在 PHP 中进行循环？让它创建 x 个这样的选择字段，将整个 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>

<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 $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]); // If using wordpress echo json_encode(['html' => $html]); // If not using wordpress