Question

我在这里很新，也对Codeigniter和Ajax很新。

我需要从下拉选项中选择后显示数据，而无需重新加载页面/提交按钮。选择该选项后，它会显示，因为我能够正确显示该选项的数据，现在我只需要在两个单独的字段上显示基于该选项的数据即可。

例如：

包装：包装1

说明：有些东西

jadwal：即将宣布

这些选项是产品，我需要在其单独的字段上显示的是description字段上的说明和jadwal字段上的jadwal。

这是该视图的代码：


//this is the code for the options

<div class="form-group">
    <label for="paket">Pilih Paket</label>
    <select class="form-control form-control-sm" name="paket" id="paket">
      <option value="">Pilih Paket</option>
        <?php  
            foreach ($datatour as $dttour) 
            {
                if ($id==$dttour->id) 
                {
                    $s='selected';
                }
                else
                {
                    $s='';
                }
            ?>
                <option <?php echo $s ?>  value="<?php echo $dttour->id;?>"><?php echo $dttour->paket;?></option>
                <?php
            }
        ?>
    </select>
</div>

<div class="row">
    <div class="col-md-8" align="left">
        <label for="jadwal">Jadwal</label>
        <div style="border:1px solid #ccc;text-align:left;background-color:white;">

            // this is where i display the jadwal data

        </div>
    </div>
</div>

<div class="kolom" style="border:1px solid #ccc;background-color:white;overflow:auto;" align="center">
        <div class="row">
            <h3>Detail Paket</h3> <br>

        // this is where i display the description data

        <p></p>
        </div>

</div>

我还没有为模型和控制器编写任何代码，非常感谢过程的任何帮助和解释（如果要问的不多），谢谢。

Answer 1

尝试实现此代码，请参见W3schools Jquery

$(document).ready(function(){
    $("#btn_form_submit").click(function(){
        $.ajax({
           cache:false,
           type:"POST"
           //equivalent of action attribute in form tag
           url:"path/to/your/php/"
           data: $("my_form").serialize(),
           success: function(data){
               //returns data from php if success
           }
        });
    });

});

Answer 2

将视图分为两个视图：

第一个视图：在文件夹 sandbox_v

中名为 sand_main.php

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="form-group">
    <label for="paket">Pilih Paket</label>
        <select class="form-control form-control-sm" name="paket" id="paket">
      <option selected value="">Pilih Paket</option> 
      <option value="123">123</option>
      <option value="324">566</option>
      <option value="555">333</option>
       <!-- I've used my own code, for checking the result, you should use your:
       <option value="">Pilih Paket</option>
        <?php  
            foreach ($datatour as $dttour) 
            {
                if ($id==$dttour->id) 
                {
                    $s='selected';
                }
                else
                {
                    $s='';
                }
            ?>
                <option <?php echo $s ?>  value="<?php echo $dttour->id;?>"><?php echo $dttour->paket;?></option>
                <?php
            }
        ?>
       -->      
    </select>
</div>

<div id="info"></div>

下一个 JS ：

<script type="text/javascript">
$(function(){

    $('#paket').unbind('change');
    $('#paket').change(function(){

    var opt_sel = $('#paket').val();  

        $.ajax({
            method:"POST", 
            url:'/index.php/sandbox/s1',
            data:{
                sel_op:opt_sel
            }
        }).done(function(a){

            $('#info').html(a);
        }).fail(function(){

            alert("It's an epic fail.");
        });
    });

})
</script>

第二视图：在文件夹 sandbox_v

中名为 sand_view_2.php

<div class="row">
    <div class="col-md-8" align="left">
        <label for="jadwal">Jadwal</label>
        <div style="border:1px solid #ccc;text-align:left;background-color:white;">

            <?= $j_info; ?>

        </div>
    </div>
</div>

<div class="kolom" style="border:1px solid #ccc;background-color:white;overflow:auto;" align="center">
        <div class="row">
            <h3>Detail Paket</h3> <br>

            <?= $d_info; ?>

        <p></p>
        </div>

</div>

控制器：在我的示例中是 sandbox.php

<?php
class Sandbox extends CI_Controller {

    public function __construct() {
        parent::__construct(); 
    }

    public function index() { 
        // here you should get your $datatour data          

        $this->load->view('sandbox_v/sand_main.php', [
                            'datatour'     => $datatour 
                                ]);
    }

    public function s1() { 

        $sel_val = $this->input->post('sel_op');

        /*you can use your DB for getting a description for each value
         * in this case you should add in __construct() your model as $this->load->model('your_model);  
         * or use your DB connection directly here.
         */ 

        /* with your model:
         * $jdwal_info =  $this->your_model->your_jdwal($sel_val); 
         * $detail_info =  $this->your_model->your_detail($sel_val); 
         */

        // without. It means that you've got info in the other way, for example, in predefined way:

        if ($sel_val == 555) {

            $jdwal_info = 'descr 1';
            $detail_info = 'detail 1';
        } else if ($sel_val == 123 ) {

            $jdwal_info = 'descr 123';
            $detail_info = 'detail 123';
        } else if ($sel_val == 324 ) {

            $jdwal_info = 'descr 324';
            $detail_info = 'detail 324';
        } else {

            $jdwal_info = 'descr N\A';
            $detail_info = 'detail N\A';
        }

        $this->load->view('sandbox_v/sand_view_2.php',[
                                'j_info' => $jdwal_info,
                                'd_info' => $detail_info
                            ]); 
    }  
}

型号：名为 your_model.php

<?php
class Your_model extends CI_Model {

    function __construct()
    {
        $this->load->database();
    }

    public function your_jdwal($a) {

        // process of getting result from DB over input variable $a (the name of it doesn't matter)
         return $res;
    }

    public function your_detail($a) {

        // process of getting result from DB over input variable $a (the name of it doesn't matter)
         return $res;
    }

}

检查。它对我有用。

从下拉代码点火器选择选项后显示数据

2 个答案: