使用ajax PHP在每次下载时动态填充Dropdown

时间:2017-05-03 05:21:03

标签: php jquery ajax codeigniter

这是我的php CodeIgniter代码,它生成了30个Dropdown,这也是从数据库填充的,这是workig absolutly罚款。 这是我的下拉列表的预览。每个列表都将填充相关的paraller字段。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函数,这样做是否可行?如果有人知道请帮助。

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

你不必写30次ajax电话。只需创建一个调用ajax和更改事件调用的函数,其功能如下所示。即使你不必写30次更改事件,只需将一个公共类(此处为eg.dropchange)添加到所有下拉列表中,如下所示,并相应地更改下拉列表更改事件

t2

答案 2 :(得分:1)

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

客户端文件(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);

希望,它会帮助你。了解如何在您的上下文中实现此类功能。

相关问题