jQuery 連動プルダウンの値をサーバーから取得する方法

select ボックスにおける基本的な動作のサンプルです。

あるセレクトボックスで値を選ぶと、その他のセレクトボックスが連動して、該当する値しか表示しなくなります。

値はサーバーから持ってくる形にしました。プルダウンの値をサーバーから持ってくるものが少なかったので忘備録的。

jQuery部分のサンプルコード

jQuery部分です。HTML部分に記入する。getdata.phpファイルを呼び出します。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
jQuery(function(){
    $("#carmaker").on('change', function(){
			var selectVal = $("#carmaker option:selected").val();
			if (selectVal != '') {
				var param = { no : selectVal };
				$.ajax({
					type: "POST",
					url: "getdata.php",
					data : param,
					crossDomain: false,
  				dataType: "json",
					scriptCharset: 'utf-8',
				}).done(function(data){
					$('#gas option').remove();
					$('#keishiki option').remove();
					$.each(data, function(ex_gaskigo, type){
						$('#gas').append($('<option>').text(ex_gaskigo));
						$('#keishiki').append($('<option>').text(type));
					});
				}).fail(function(XMLHttpRequest, textStatus, errorThrown){
					alert(errorThrown);
				});
			}
    });
});
</script>

Select部分

セレクトの部分です。結構長くなってしましました。セレクトの中にPHPを入れて,そこからJavascriptを呼び出します。こちらは表示したい部分に記載してください。

<select name="carmaker" style="width:150px;" id="carmaker" tabindex="11">
　<?php 
　　$stmt = $db->query("SELECT * FROM (ct_maker INNER JOIN ct_carmaker on ct_carmaker.carmakerno = ct_maker.makerno) ORDER BY ct_carmaker.sortkey");
　　　if ($_session['carmaker'] == null) {
　　　　echo "<option value=''>選択してください。</option>";
　　　　while($row = $stmt -> fetch(PDO::FETCH_ASSOC)) {
　　　　　echo "<option value=\"" . $row['makerno'] . "\" >" . $row['makername'] . "</option>";
　　　　}
　　　} else {
　　　　echo "<option value=''>選択してください。</option>";
	while($row = $stmt -> fetch(PDO::FETCH_ASSOC)) {
	　if ($row['makerno'] != $_session['carmaker'] ){
	　　echo "<option value=\"" . $row['makerno'] . "\" >" . $row['makername'] . "</option>";
	　} else {
	　　echo "<option value=\"" . $row['makerno'] . "\" selected>" . $row['makername'] . "</option>";
	　}
	}
　　　}
　?>
</select>

呼び出す.phpファイル

サーバーに接続してデータを呼び出すgetdata.phpファイルを別で作ります。この時phpファイルの中にコメントを書くとなぜかうまくいかないのでコメントは書かない方が無難です。

<?php 
 	
$request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) 
		? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : '';	
if($request !== 'xmlhttprequest') exit;
	
	$maker_no = $_POST['no'];
	$gas_list = array();
	try{
		$dsn = 'mysql:host=localhost;dbname=home;charset=utf8';
		$user = 'admin';
		$password = 'password';
		$link = new PDO($dsn, $user, $password);
	

		$sql  = "SELECT *";
		$sql .= " FROM ct_gastype";
		$sql .= " WHERE carmakerno =". $maker_no ;
		$stmt = $link->query($sql);
	}
	catch(Exception $e) {
    exit('データベース接続失敗'.$e->getMessage());
  }
	while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) {
		$gas_list[$row['ex_gaskigo']] = $row['type'];
	}
	header('Content-type: application/json');
	echo json_encode($gas_list);
?>

まとめ

jQuery 連動プルダウンの値をサーバーから取得する方法はいかがでしたでしょうか？

意外に使う場面が多いと思いますので是非参考にしてください。