logo标签列表

使用Ajax PHP动态填充下拉菜单中的每个下拉菜单

phpjqueryajaxcodeigniter
3
这是我的php CodeIgniter代码，它可以生成30个下拉菜单，这些下拉菜单也从数据库中填充，它完全正常工作。以下是下拉菜单列表的预览，每个列表都将填充相关的平行字段。enter image description here 
<?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个下拉列表的所有选项列表，然后在客户端解析它们，然后将它们放置在相应的下拉列表中呢？ - Suresh
我没看懂你的意思，你能再解释一下吗？谢谢。 - Salman Khan Sohoo
与你分享了一份样例代码，请检查一下。希望能帮到你。 - Suresh
3个回答
1

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

从哪里获取？ - Salman Khan Sohoo
在加载时，您可以进行Ajax调用，之后需要在客户端验证所有数据。 - Ashish Mashru
尝试了所有方法，但我想只使用一个函数来处理所有30个下拉菜单，否则每个单独的函数都可以正常工作。 - Salman Khan Sohoo
你可以创建一个函数，但每次选择时仍需调用该函数，这与进行30个ajax调用类似。 - Ashish Mashru
1

您不必写30次ajax调用。只需创建一个调用ajax的函数，并在更改事件中调用该函数，如下所示。甚至您也不必30次编写更改事件，只需为所有下拉菜单添加一个公共类（例如.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);
                }
            });   
    }
1
这里是一个示例代码，通过单个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);

希望这能帮助您弄清如何在您的环境中实现这种功能。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接