यह मेरा टेबल टूर है:

    +---------+---------+------------------+------------+---------+
    | 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>

मैं चाहता हूं, जब मैं क्षेत्र का चयन करता हूं "Asia" गंतव्य इनपुट केवल "America - 10 day" और "Rusia - 10 day" दिखाएगा, तो अगर मैं "Rusia - 10 day" का चयन करता हूं tanggal_keberangkatan इनपुट और कीमत स्वचालित रूप से होगी डेटा दिखाएं, मैं इसे कैसे कर सकता हूं? बहुत सराहना की अगर आप मेरी मदद करते हैं।

0
Zixvy 2 अक्टूबर 2019, 05:29

1 उत्तर

सबसे बढ़िया उत्तर

दृश्य

  <!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();
    }
}
0
Ravi Makwana 5 अक्टूबर 2019, 10:50