选择输入后,显示数据库中的数据 [英] Show data in database after select an input select

查看:59
本文介绍了选择输入后,显示数据库中的数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是我的餐桌游览:

    +---------+---------+------------------+------------+---------+
    | id_tour | region  | destination      | date_tour  | price   |
    +---------+---------+------------------+------------+---------+
    |       2 | Asia    | Amerika - 10 day | 05/09/2019 | 5000000 |
    |       4 | Asia    | Rusia - 10 day   | 23/06/2019 | 7000000 |
    |       5 | Amerika | Jepang -10 day   | 25/02/2019 | 5000000 |
    |       6 | Amerika | Swedia-10 day    | 29/07/2019 | 7000000 |
    +---------+---------+------------------+------------+---------+

这是我的输入内容:

 <div class="form-row">
                    <div class="col-md-3">
                        <label for="region">Region</label>
                        <select name="region" class="select2-input form-control" style="width:100%;">
                            <option>-- Select Region --</option>
                            <?php foreach($region as $r) : ?>
                            <option value="<?= $r['id_region'] ?>"><?= $r['region'] ?></option>
                            <?php endforeach; ?>
                        <?= form_error('region', '<small class="text-danger pl-3">', '</small>'); ?>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="destination">Destination</label>
                            <select name="destination" class="select2-input form-control" style="width:100%;">
                                <option>-- Select Destination --</option>
                                <?php foreach($destination as $d) : ?>
                                <option value="<?= $d['id_destination'] ?>"><?= $d['destination'] ?></option>
                                <?php endforeach; ?>
                            <?= form_error('destination', '<small class="text-danger pl-3">', '</small>'); ?>
                            </select>
                    </div>
                    <div class="col-md-3">
                        <label for="date_tour">Tanggal Keberangkatan</label>
                        <input type="text" class="form-control datepicker" name="date_tour">
                        <?= form_error('date_tour', '<small class="text-danger pl-3">', '</small>'); ?>
                    </div>
                    <div class="col-md-3">
                        <label for="price">Price Invoice</label>
                        <input type="text" class="form-control" name="price_invoice">
                        <?= form_error('price_invoice', '<small class="text-danger pl-3">', '</small>'); ?>
                    </div>
                </div>

我想要,当我选择地区亚洲" 时,目标输入将仅显示美国-10天" 俄罗斯-10天" ,然后如果我选择俄罗斯-10天" ,而 tanggal_keberangkatan 输入,并且价格会自动显示数据,我该怎么办?非常感谢您的帮助.

I want, When I select region "Asia" the destination input will only show "America - 10 day" and "Rusia - 10 day", then if i select "Rusia - 10 day" the tanggal_keberangkatan input and price will automatically show the data, how can i do it ? much appreciated if you help me.

推荐答案

查看

  <!DOCTYPE html>
  <html>
  <head>
      <title></title>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

      <!-- Popper JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </head>
  <body>
       <div class="form-row">
       <div class="col-md-3">
          <label for="region">Region</label>
          <select name="region" id="region" class="select2-input form-control" style="width:100%;">
            <?php
            foreach ($region as $key => $r)
            {
                ?>
                <option id="region_value" value="<?= $r['region'] ?>"><?= $r['region'] ?></option>  
                <?php
            }
            ?>
            <?= form_error('region', '<small class="text-danger pl-3">', '</small>'); ?>
        </select>
    </div>
    <div class="col-md-3">
        <label for="destination">Destination</label>
        <select name="destination" id="destination" class="select2-input form-control" style="width:100%;">
            <option value="">Select Your Destination</option>
        </select>
        <?= form_error('destination', '<small class="text-danger pl-3">', '</small>'); ?>
    </div>
    <div class="col-md-3">
        <label for="date_tour">Tanggal Keberangkatan</label>
        <input type="text" class="form-control datepicker" name="date_tour" id="date">
        <?= form_error('date_tour', '<small class="text-danger pl-3">', '</small>'); ?>
    </div>
    <div class="col-md-3">
        <label for="price">Price Invoice</label>
        <input type="text" class="form-control" name="price_invoice" id="price" >
        <?= form_error('price_invoice', '<small class="text-danger pl-3">', '</small>'); ?>
    </div>
</div>

还可以查看

 <script>
     $(document).ready(function() {

      $('#region').change(function(){

        var region_value = $(this).val();

        if(region_value)
        {
            $.ajax({
                url:"http://localhost/narson/stackoverflow/destination/",
                type:"post",
                data:{'region':region_value},
                datatype: "json",
                success:function(data,status)
                {
                    $("#destination").empty();
                    $.each(JSON.parse(data), function(key,value){
                        console.log(value);
                        $("#destination").append('<option value='+value.destination+'>Select Your Destination</option>');
                        for(var i = 0; i < data.length; i++) {
                            $value = value[i].destination.replace(/\s+/g, "_");
                            $("#destination").append('<option value='+$value+'>'+value[i].destination+'</option>');
                        };
                    });
                }
            });
        }
        else
        {
            $('#destination').empty();
        }
    });


    $('#destination').change(function(){

        var price_values = $(this).val();
        var price_valuess = price_values.replace("_", " ");
        var price_valuesss = price_valuess.replace("_", " ");
        var price_value = price_valuesss.replace("_", " ");

        if(price_value)
        {
            $.ajax({
                url:"http://localhost/narson/stackoverflow/price/",
                type:"post",
                data:{'price':price_value},
                datatype: "json",
                success:function(data,status)
                {
                    $("#price").empty();
                    $.each(JSON.parse(data), function(key,value){
                        console.log(value);                         
                        for(var i = 0; i < data.length; i++) {
                            $("#price").val(value[i].price);
                            $("#date").val(value[i].date_tour);
                        };
                    });
                }
            });
        }
        else
        {
            $('#price').empty();
        }
    });
});

控制器

   <?php
      class Stackoverflow extends CI_Controller 
    {
       public function __construct()
    {
       parent::__construct();
       $this->load->model('User_model');
       $this->load->model('Stack_model');
       $this->load->library('form_validation');
    }

     public function index()
   {
      $data['region'] = $this->Stack_model->get_region();
      $this->load->view('stackoverflow',$data);
   }

    public function destination()
  {
      $region = $this->input->post('region');
      $data['destination'] = $this->Stack_model->get_destination($region);
      echo json_encode($data);
  }

     public function price()
  {
     $price = $this->input->post('price');
     $data['price'] = $this->Stack_model->get_price($price);
     echo json_encode($data);
  }
}
  ?>

模型

   class Stack_model extends CI_Model {

   public function get_region()
    {
       $this->db->select('*');
       $this->db->from('tour');
       $query = $this->db->get();
       return $query->result_array();
    }

  public function get_destination($region)
    {
       $this->db->select('*');
       $this->db->from('tour');
       $this->db->where('region',$region);
       $query = $this->db->get();
       return $query->result();
    }

     public function get_price($price)
    {
      $this->db->select('*');
      $this->db->from('tour');
      $this->db->where('destination',$price);
      $query = $this->db->get();
      return $query->result();
    }
}

这篇关于选择输入后,显示数据库中的数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆