จำนวนคนเข้าดู: 15,947

Select/option เลือกจังหวัด-อำเภอ-ตำบล php + mysqli

การทำข้อมูลเลือกจังหวัด/อำเภอ/ตำบล ต้องมีฐานข้อมูลของจังหวัด/อำเภอ/ตำบล ก่อน
ถึงจะทำการเรียกข้อมูลออกมา แล้วเขียนด้วย sql เพื่อนให้ลิงค์ข้อมูลให้ตรงกับจังหวัดนั้นๆ
** code นี้แจกสำหรับนักพัฒนาไว้นำไปพัฒนาต่อยอดได้

ฐานข้อมูล จังหวัด/อำเภอ/ตำบล คลิกดาวน์โหลด

Code Form.php

<?php
      $con= mysqli_connect("localhost","root","","db_test") or die("Error: " . mysqli_error($con));
      mysqli_query($con, "SET NAMES 'utf8' ");
      error_reporting( error_reporting() & ~E_NOTICE );
      date_default_timezone_set('Asia/Bangkok');
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>select by.devtai.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<?php
    $sql_provinces = "SELECT * FROM provinces";
    $query = mysqli_query($con, $sql_provinces);
?>

<div class="container">
  <h2>Form control: select by.devtai.com</h2>
  <p>code เลือกจังหวัด อำเภอ ตำบล php + mysqli + ajax + jquery + bootstrap :</p>
  <form>
    <div class="form-group">
      <label for="sel1">จังหวัด:</label>
      <select class="form-control" name="Ref_prov_id" id="provinces">
            <option value="" selected disabled>-กรุณาเลือกจังหวัด-</option>
             <?php foreach ($query as $value) { ?>
            <option value="<?=$value['id']?>"><?=$value['name_th']?></option>
            <?php } ?>
      </select>
      <br>

      <label for="sel1">อำเภอ:</label>
      <select class="form-control" name="Ref_dist_id" id="amphures">
      </select>
      <br>

      <label for="sel1">ตำบล:</label>
      <select class="form-control" name="Ref_subdist_id" id="districts">
      </select>
       <br>

      <label for="sel1">รหัสไปรษณีย์:</label>
       <input type="text" name="zip_code" id="zip_code" class="form-control">
          <br>
        <a href="https://devtai.com/?cat=38"> <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button></a>
    </div>
  </form>
</div>
</body>
</html>
<?php include('script.php');?>

<?php

$con= mysqli_connect("localhost","root","","db_test") or die("Error: " . mysqli_error($con));

mysqli_query($con, "SET NAMES 'utf8' ");

error_reporting( error_reporting() & ~E_NOTICE );

date_default_timezone_set('Asia/Bangkok');

<!DOCTYPE html>

<head>

<title>select by.devtai.com</title>

</head>

<body>

<?php

$sql_provinces = "SELECT * FROM provinces";

$query = mysqli_query($con, $sql_provinces);

<h2>Form control: select by.devtai.com</h2>

<p>code เลือกจังหวัด อำเภอ ตำบล php + mysqli + ajax + jquery + bootstrap :</p>

<form>

<label for="sel1">จังหวัด:</label>

<option value="" selected disabled>-กรุณาเลือกจังหวัด-</option>

<?php foreach ($query as $value) { ?>

<?php } ?>

</select>

<br>

<label for="sel1">อำเภอ:</label>

</select>

<br>

</select>

<br>

<label for="sel1">รหัสไปรษณีย์:</label>

<br>

<a href="https://devtai.com/?cat=38"> <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button></a>

</div>

</form>

</div>

</body>

</html>

<?php include('script.php');?>

Code ajax_db.php

<?php

          $con= mysqli_connect("localhost","root","","db_test") or die("Error: " . mysqli_error($con));
          mysqli_query($con, "SET NAMES 'utf8' ");
          error_reporting( error_reporting() & ~E_NOTICE );
          date_default_timezone_set('Asia/Bangkok');  


  if (isset($_POST['function']) && $_POST['function'] == 'provinces') {
  	$id = $_POST['id'];
  	$sql = "SELECT * FROM amphures WHERE province_id='$id'";
  	$query = mysqli_query($con, $sql);
  	echo '<option value="" selected disabled>-กรุณาเลือกอำเภอ-</option>';
  	foreach ($query as $value) {
  		echo '<option value="'.$value['id'].'">'.$value['name_a'].'</option>';
  		
  	}
  }


if (isset($_POST['function']) && $_POST['function'] == 'amphures') {
    $id = $_POST['id'];
    $sql = "SELECT * FROM districts WHERE amphure_id='$id'";
    $query = mysqli_query($con, $sql);
    echo '<option value="" selected disabled>-กรุณาเลือกตำบล-</option>';
    foreach ($query as $value2) {
      echo '<option value="'.$value2['id'].'">'.$value2['name_t'].'</option>';
      
    }
  }

  if (isset($_POST['function']) && $_POST['function'] == 'districts') {
    $id = $_POST['id'];
    $sql = "SELECT * FROM districts WHERE id='$id'";
    $query3 = mysqli_query($con, $sql);
    $result = mysqli_fetch_assoc($query3);
    echo $result['zip_code'];
    exit();
  }
?>

<?php

$con= mysqli_connect("localhost","root","","db_test") or die("Error: " . mysqli_error($con));

mysqli_query($con, "SET NAMES 'utf8' ");

error_reporting( error_reporting() & ~E_NOTICE );

date_default_timezone_set('Asia/Bangkok');

if (isset($_POST['function']) && $_POST['function'] == 'provinces') {

$id = $_POST['id'];

$sql = "SELECT * FROM amphures WHERE province_id='$id'";

$query = mysqli_query($con, $sql);

echo '<option value="" selected disabled>-กรุณาเลือกอำเภอ-</option>';

foreach ($query as $value) {

echo '<option value="'.$value['id'].'">'.$value['name_a'].'</option>';

}

if (isset($_POST['function']) && $_POST['function'] == 'amphures') {

$id = $_POST['id'];

$sql = "SELECT * FROM districts WHERE amphure_id='$id'";

$query = mysqli_query($con, $sql);

echo '<option value="" selected disabled>-กรุณาเลือกตำบล-</option>';

foreach ($query as $value2) {

echo '<option value="'.$value2['id'].'">'.$value2['name_t'].'</option>';

}

if (isset($_POST['function']) && $_POST['function'] == 'districts') {

$id = $_POST['id'];

$sql = "SELECT * FROM districts WHERE id='$id'";

$query3 = mysqli_query($con, $sql);

$result = mysqli_fetch_assoc($query3);

echo $result['zip_code'];

exit();

}

Code script.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
  $('#provinces').change(function() {
    var id_province = $(this).val();

      $.ajax({
      type: "POST",
      url: "ajax_db.php",
      data: {id:id_province,function:'provinces'},
      success: function(data){
          $('#amphures').html(data); 
          $('#districts').html(' '); 
          $('#districts').val(' ');  
          $('#zip_code').val(' '); 
      }
    });
  });

  $('#amphures').change(function() {
    var id_amphures = $(this).val();

      $.ajax({
      type: "POST",
      url: "ajax_db.php",
      data: {id:id_amphures,function:'amphures'},
      success: function(data){
          $('#districts').html(data);  
      }
    });
  });

   $('#districts').change(function() {
    var id_districts= $(this).val();

      $.ajax({
      type: "POST",
      url: "ajax_db.php",
      data: {id:id_districts,function:'districts'},
      success: function(data){
          $('#zip_code').val(data)
      }
    });
  
  });
</script>

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

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

$.ajax({

type: "POST",

url: "ajax_db.php",

data: {id:id_province,function:'provinces'},

success: function(data){

$('#amphures').html(data);

$('#districts').html(' ');

$('#districts').val(' ');

$('#zip_code').val(' ');

}

});

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

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

$.ajax({

type: "POST",

url: "ajax_db.php",

data: {id:id_amphures,function:'amphures'},

success: function(data){

$('#districts').html(data);

}

});

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

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

$.ajax({

type: "POST",

url: "ajax_db.php",

data: {id:id_districts,function:'districts'},

success: function(data){

$('#zip_code').val(data)

}

});

</script>

devtai developer

ajax jquery PHP + MySQLi Select/List เลือกจังหวังด-อำเภอ-ตำบล

Select/List เลือกจังหวัด-อำเภอ-ตำบล php + mysqli + ajax + jquery

Select/option เลือกจังหวัด-อำเภอ-ตำบล php + mysqli

Related

devtai developer

Select/option เลือกจังหวัด-อำเภอ-ตำบล php + mysqli

Share this:

Related

devtai developer