使用ajax PHP使用每个downpdown动态填充Dropdown答案

【问题标题】：Populating Dropdown dynamically with each dowpdown using ajax PHP使用ajax PHP使用每个downpdown动态填充Dropdown
【发布时间】：2017-05-03 05:21:03
【问题描述】：

这是我的 php CodeIgniter 代码，它生成 30 个下拉菜单，这些下拉菜单也是从数据库中填充的，工作起来非常好。这是我的下拉列表的预览。每个列表都将填充相关的并行字段。

<?php for($i=1; $i<=30; $i++){ ?>
<div class="form-group c">
    <div class="col-sm-12">
        <div class="input-group">
            <div class="col-xs-12 col-sm-12 <?php if (form_error('iat_code_'.$i)) { echo "has-error";} ?>">
                <?php
                          $itm_iat_codes = $itm_iat_code_1.$i;
                          if(isset($itm_iat_codes)){$itm_iat_codes;}else{$itm_iat_codes = "";}
                          echo form_dropdown(
                              'iat_code_'.$i,
                              $ProductAttributeTitle,'',
                              'class="col-xs-12 col-sm-6 required-field form-control"  
                              id="iat_code_'.$i.'" placeholder="IAT Code" tabindex="1" data-style="form-control" required');
                ?>
            </div>
            <?php echo form_error('iat_code_'.$i, '<div for="iat_code_'.$i.'" class="alert-danger">', '</div>'); ?>
        </div>
    </div>
</div>
<?php    }?>

这是另一个代码，它也生成 30 个空下拉列表，这些将使用 ajax 填充。 PHP代码

`<?php for($i=1; $i<=30; $i++){ ?>
<div class="form-group c">
    <div class="col-xs-12 col-sm-12">
        <div class="input-group">
            <select name="istbs_code_<?php echo $i; ?>" class="col-xs-12 col-sm-6 required-field form-control" id="istbs_code_<?php echo $i; ?>" placeholder="ISTBS Code" tabindex="1" data-style="form-control">
                <option value="">Select Option</option>
            </select>
        </div>
    </div>
</div>
<?php } ?>`

这是我的 ajax 代码，用于填充数据库中的其他下拉列表。

$("#iat_code_1").change(function(){
        var json = {};
        var abc = json['iat_code_1'] = $(this).val();
        var request = $.ajax({
            url: "<?php echo base_url($controller.'/get_product_attributes'); ?>",
            type: "POST",
            data: json,
            dataType: "html",
            success : function(response){
                $("#istbs_code_1").html(response);
            }
        });   
    });

现在的问题是我面临的问题是在 ajax 中，如果我要填充所有 30 个下拉列表以及每个相关的为此目的，我必须制作 30 个 ajax 函数，但我只想用一个 ajax 函数来制作它，可以这样做吗？如果有人知道，请帮忙。

【问题讨论】：

你为什么不在单个 Ajax 调用中获取这 30 个下拉列表的所有选项列表并在客户端解析这些选项列表，然后将它们放在相应的下拉列表中？
我没有明白你的意思，请你再澄清一下吗？谢谢
与您分享了一个示例代码。检查一次。希望对您有所帮助。

标签： php jquery ajax codeigniter

【解决方案1】：

在这里，您可以使用单个 ajax 调用获取所有下拉数据，但之后您需要根据要求进行客户端验证。

【讨论】：

从哪里获取？
在加载时您可以进行 ajax 调用，之后您需要验证客户端中的所有数据。
尝试了所有，但我想使用一个仅适用于所有 30 个下拉菜单的功能，否则每个单独的功能都可以正常工作。
你可以创建一个函数，但之后每次选择时你都必须调用这个函数，这类似于 30 ajax 调用。

【解决方案2】：

您不必编写 ajax 调用 30 次。只需创建一个调用 ajax 的函数并在更改事件时调用该函数，如下所示。即使您不必编写更改事件 30 次，只需将一个通用类（此处为 eg.dropchange ）添加到所有下拉列表中，如下所示并相应地更改下拉更改事件

`<?php for($i=1; $i<=30; $i++){ ?>
<div class="form-group c">
    <div class="col-xs-12 col-sm-12">
        <div class="input-group">
            <select name="istbs_code_<?php echo $i; ?>" class="dropchange col-xs-12 col-sm-6 required-field form-control" id="istbs_code_<?php echo $i; ?>" placeholder="ISTBS Code" tabindex="1" data-style="form-control">
                <option value="">Select Option</option>
            </select>
        </div>
    </div>
</div>
<?php } ?>`

        $(document).on("change",".dropchange ",function(){
           var thisid=this.id;
            var json = {};
            var abc = json['iat_code_1'] = $(this).val();
            var request = callajax(thisid);
        });

    function callajax(thisid){
    $.ajax({
                url: "<?php echo base_url($controller.'/get_product_attributes'); ?>",
                type: "POST",
                data: json,
                dataType: "html",
                success : function(response){
                    $("#"+thisid).html(response);
                }
            });   
    }

【讨论】：

【解决方案3】：

这是一个示例代码，它通过单个 Ajax 调用获取数据并在动态创建的下拉列表中重新填充这些数据。

客户端文件(index.php)

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        console.log( "ready!" );

        $.ajax({
            method: "GET",
            url: "dropDownList.php",
        }).done(function( response ) {
            console.log('Response Data', response);

            $.each( response, function( key, value ) {

                $.each( value, function( key1, value1 ) {
                    console.log( "KEY1 : "+key1+", VALUE1 : " + value1['value'] );

                    var option_value = value1['value'];
                    var option_text = value1['text'];
                    var dd_option_list = "<option value='"+option_value+"'>"+option_text+"</option>";

                    $('#dropdown_'+key).append(dd_option_list);
                });
            });
        });

    });
</script>
</head>
<body>

<?php

    $noOfDropDownList = 3;

    for ($i=1; $i <= 3 ; $i++) {
        echo "<select id='dropdown_$i' name=''>";
        echo "</select><br>";
    }
?>

</body>
</html>

服务器端文件 (dropDownList.php)

<?php
$dropdownList[1][] = array('value' => 'apple','text' => 'apple');
$dropdownList[1][] = array('value' => 'mango','text' => 'mango');
$dropdownList[1][] = array('value' => 'bananan','text' => 'bananan');

$dropdownList[2][] = array('value' => 'cat','text' => 'cat');
$dropdownList[2][] = array('value' => 'dog','text' => 'dog');
$dropdownList[2][] = array('value' => 'rat','text' => 'rat');

$dropdownList[3][] = array('value' => 'google','text' => 'google');
$dropdownList[3][] = array('value' => 'apple','text' => 'apple');
$dropdownList[3][] = array('value' => 'microsoft','text' => 'microsoft');

header('Content-Type: application/json');
echo json_encode($dropdownList);

希望对您有所帮助。了解如何在您的上下文中实现此类功能。

【讨论】：