[SELECT2] Sử dụng form + select2 + ajax + get value (ok)

Example 1:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
</head>

<body>
  <select id="course_category">
    <option value="">Chọn khóa học</option>
    <option value="2">Giao Tiếp</option>
    <option value="3">IELTS</option>
    <option value="4">TOEIC</option>
    <option value="5">TOEFL</option>
    <option value="6">Doanh Nghiệp</option>
    <option value="7">Chuyên Ngành</option>
    <option value="8">Cấp tốc</option>
    <option value="9">Người mới</option>
    <option value="10">Trẻ em</option>
  </select>
  <!-- Script -->
  <script type="text/javascript">
  jQuery(document).ready(function($) {
  	$('#course_category').change(function(){
		var idcategory=$(this).val();
		$.ajax({
			url:'ajax.php',
			type:'post',
			data:{idcategory:idcategory},
			// dataType:'html',
			success:function(res){
				console.log(res);
			},
			error:function(xhr){
				console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
			}
		});
	});
  });
  </script>
</body>

</html>
<?php  
	var_export($_POST);
?>

Example 2:

<?php
header('Content-Type: application/json');
require_once "dbconn.php";
require_once "sql.php";
$term        = trim(strip_tags($_GET['q']));
$sql         = new sql();
$countrylist = $sql->getAllCountry($term);
$country     = [];
$i           = 0;
foreach ($countrylist[1] as $key) {
  $countrylist[1][$i]['desc'] = $key['country_code'] . ' - ' . $key['country_name'];
  $countrylist[1][$i]['id']   = $key['country_code'];
  $i++;
}
$country['items'] = $countrylist[1];
echo json_encode($country);
?>
<?php  
	var_export($_POST['val']);
?>
<?php
$dbuserx = 'root';
$dbpassx = '';
class dbconn {
  public $dblocal;
  public function __construct() {}
  public function initDBO() {
    global $dbuserx, $dbpassx;
    try {
      $this->dblocal = new PDO("mysql:host=localhost;dbname=selectdb;charset=latin1", $dbuserx, $dbpassx, [PDO::ATTR_PERSISTENT => true]);
      $this->dblocal->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    } catch (PDOException $e) {
      die("Tidak dapat konek ke database");
    }
  }
}
?>
<!DOCTYPE html>
<html>
<head>
  <title>Tutorial selectDB remote ajax using jquery,php and mysql by seegatesite.com</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>
<body>
  <div>
    <select class="select2"></select>
  </div>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
  <script type="text/javascript">
  $(".select2").select2({
    placeholder: "Search country here...",
    width: '175px',
    ajax: {
      url: "ajax.php",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return {
          q: params.term,
          page: params.page
        };
      },
      processResults: function(data) {
        return {
          results: data.items
        };
      },
      cache: false
    },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
  });
  function formatRepo(repo) {
    if(repo.loading) return repo.text;
    return repo.desc;
  }
  function formatRepoSelection(repo) {
    return repo.desc || repo.text;
  }
  jQuery(document).ready(function($) {
    $('.select2').change(function(){
      var val = $(this).val();
      $.ajax({
      url:'ajaxb.php',
      type:'post',
      data:{val},
      success:function(res){
        console.log(res);
      },
      error:function(xhr){
        console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
      }
    });
    });
  });
  </script>
</body>

</html>
<?php
class sql extends dbconn {
  public function __construct() {
    $this->initDBO();
  }
  public function getAllCountry($term) {
    $term = '%' . $term . '%';
    $db   = $this->dblocal;
    try
    {
      $stmt = $db->prepare("SELECT a.* FROM country a WHERE a.country_name LIKE :term OR  a.country_code LIKE :term ");

      $stmt->bindParam("term", $term);
      $stmt->execute();
      $stat[0] = true;
      $stat[1] = $stmt->fetchAll(PDO::FETCH_ASSOC);
      return $stat;
    } catch (PDOException $ex) {
      $stat[0] = false;
      $stat[1] = $ex->getMessage();
      return $stat;
    }
  }
}

PreviousSử dụng database + php (ok)NextĐọc dữ liệu từ nguồn khác sử dụng AJAX (ok)

Last updated