weeix/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AJAX Dropdown Example</title>
</head>
<body>
    <h1>AJAX Dropdown Example</h1>
    <form>
        <p>
            <label for="com-vendor">Vendor: </label>
            <select name="com-vendor" id="com-vendor">
                <option value="">--- Choose a vendor ---</option>
                <option value="1">HP</option>
                <option value="2">Dell</option>
            </select>
        </p>
        <p>
            <label for="com-model">Model: </label>
            <select name="com-model" id="com-model">
                    <option value="">--- Choose a model ---</option>
            </select>
        </p>
    </form>

    <!-- เพื่อให้ใช้ fetch() ใน IE ได้ -->
    <script src="https://unpkg.com/unfetch/polyfill"></script>
    <script>
        var vendorDropdown = document.getElementById('com-vendor'); // หา dropdown ยี่ห้อ
        // เมื่อมีการเปลี่ยนค่าใน dropdown ยี่ห้อ ให้ใช้ AJAX ดึงโมเดลของยี่ห้อที่เลือกมาแสดง
        vendorDropdown.addEventListener('change', function(event) {
            var vendorId = vendorDropdown.value;
            populateModels(vendorId);
        });

        // ใช้ AJAX ดึงโมเดลของยี่ห้อที่เลือกมาแสดง
        function populateModels(vendorId) {
            clearModels(); // ลบโมเดลทั้งหมดก่อน
            var url = 'listModels.php?vendorId=' + vendorId;
            fetch(url).then(function(response) {
                // เช็คก่อนว่าดึงข้อมูลสำเร็จไหม
                if (!response.ok) {
                    throw new Error('Cannot get models');
                }
                return response.json(); // ส่งต่อค่าโดยแปลง json เป็น array
            }).then(function(data) {
                var modelDropdown = document.getElementById('com-model'); // หา dropdown โมเดล
                for (var i = 0; i < data.length; i++) {
                    // สร้างตัวเลือกจากข้อมูลที่ดึงมาได้แล้วยัดเข้าไปใน dropdown
                    var option = document.createElement("option");
                    option.value = data[i].id;
                    option.text = data[i].name;
                    modelDropdown.add(option);
                }
            });
        }

        // ลบโมเดลทั้งหมด
        function clearModels() {
            var modelDropdown = document.getElementById('com-model'); // หา dropdown โมเดล
            modelDropdown.options.length = 1; // ทำให้เหลือแค่ตัวเลือกแรก
        }
    </script>
</body>
</html>

## listModels.php
<?php

$vendorId = (int) $_GET['vendorId'];
$models = [];

if ($vendorId == 1) {
    $models[] = ['id' => 101, 'name' => 'Spectre'];
    $models[] = ['id' => 102, 'name' => 'Envy'];
    $models[] = ['id' => 103, 'name' => 'Pavilion'];
} else if ($vendorId == 2) {
    $models[] = ['id' => 201, 'name' => 'Inspiron'];
    $models[] = ['id' => 202, 'name' => 'Latitude'];
    $models[] = ['id' => 203, 'name' => 'Vostro'];
}

echo json_encode($models);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>AJAX Dropdown Example</title>
	</head>
	<body>
	<h1>AJAX Dropdown Example</h1>
	<form>
	<p>
	<label for="com-vendor">Vendor: </label>
	<select name="com-vendor" id="com-vendor">
	<option value="">--- Choose a vendor ---</option>
	<option value="1">HP</option>
	<option value="2">Dell</option>
	</select>
	</p>
	<p>
	<label for="com-model">Model: </label>
	<select name="com-model" id="com-model">
	<option value="">--- Choose a model ---</option>
	</select>
	</p>
	</form>

	<!-- เพื่อให้ใช้ fetch() ใน IE ได้ -->
	<script src="https://unpkg.com/unfetch/polyfill"></script>
	<script>
	var vendorDropdown = document.getElementById('com-vendor'); // หา dropdown ยี่ห้อ
	// เมื่อมีการเปลี่ยนค่าใน dropdown ยี่ห้อ ให้ใช้ AJAX ดึงโมเดลของยี่ห้อที่เลือกมาแสดง
	vendorDropdown.addEventListener('change', function(event) {
	var vendorId = vendorDropdown.value;
	populateModels(vendorId);
	});

	// ใช้ AJAX ดึงโมเดลของยี่ห้อที่เลือกมาแสดง
	function populateModels(vendorId) {
	clearModels(); // ลบโมเดลทั้งหมดก่อน
	var url = 'listModels.php?vendorId=' + vendorId;
	fetch(url).then(function(response) {
	// เช็คก่อนว่าดึงข้อมูลสำเร็จไหม
	if (!response.ok) {
	throw new Error('Cannot get models');
	}
	return response.json(); // ส่งต่อค่าโดยแปลง json เป็น array
	}).then(function(data) {
	var modelDropdown = document.getElementById('com-model'); // หา dropdown โมเดล
	for (var i = 0; i < data.length; i++) {
	// สร้างตัวเลือกจากข้อมูลที่ดึงมาได้แล้วยัดเข้าไปใน dropdown
	var option = document.createElement("option");
	option.value = data[i].id;
	option.text = data[i].name;
	modelDropdown.add(option);
	}
	});
	}

	// ลบโมเดลทั้งหมด
	function clearModels() {
	var modelDropdown = document.getElementById('com-model'); // หา dropdown โมเดล
	modelDropdown.options.length = 1; // ทำให้เหลือแค่ตัวเลือกแรก
	}
	</script>
	</body>
	</html>
	<?php

	$vendorId = (int) $_GET['vendorId'];
	$models = [];

	if ($vendorId == 1) {
	$models[] = ['id' => 101, 'name' => 'Spectre'];
	$models[] = ['id' => 102, 'name' => 'Envy'];
	$models[] = ['id' => 103, 'name' => 'Pavilion'];
	} else if ($vendorId == 2) {
	$models[] = ['id' => 201, 'name' => 'Inspiron'];
	$models[] = ['id' => 202, 'name' => 'Latitude'];
	$models[] = ['id' => 203, 'name' => 'Vostro'];
	}

	echo json_encode($models);