问题
This is my table tour :
+---------+---------+------------------+------------+---------+
| 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 |
+---------+---------+------------------+------------+---------+
This is my Input :
<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>
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.
回答1:
VIEW
<!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>
ALSO IN VIEW
<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();
}
});
});
CONTROLLER
<?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);
}
}
?>
MODEL
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();
}
}
来源：https://stackoverflow.com/questions/58194476/show-data-in-database-after-select-an-input-select