02.<html>
03. <head>
04. <title> Dropdown List - Depend On Other </title>
05. <meta name="Generator" content="EditPlus">
06. <meta name="Author" content="Unidentifier-thaicreate.com">
07. <meta name="Keywords" content="">
08. <meta name="Description" content="">
11. </head>
12.
13. <body>
14. <script>
15.$(document).ready(function() {
16.
17. $("#manufactor").change(function() {
18. var selectedManu = $("option:selected",this).val();
19. var optionString="";
20. if(selectedManu == "TOYOTA"){
21. optionString="<option value='NewPrius'>New Prius</option>\n";
22. optionString+="<option value='camry2.5'>Camry 2.5</option>\n";
23. optionString+="<option value='altis2.0'>Altis 2.0</option>\n";
24. }
25. if(selectedManu == "MAZDA"){
26. optionString="<option value='mazda3'>Mazda 3</option>\n";
27. optionString+="<option value='mazda2'>Mazda 2</option>\n";
28. optionString+="<option value='bt50pro'>BT-50 Pro</option>\n";
29. }
30. $("#models").children().remove().end().append(optionString);
31. });
32. $("#models").change(function() {
33. var finalresult = $("option:selected",this).val();
34. $("#final_result").empty().append(finalresult);
35. });
36.})
37.</script>
38.
39.
40.<form>
41.<select name="manufactor" id="manufactor">
42.<option value="" selected>Please Select... </option>
43.<option value="TOYOTA">TOYOTA </option>
44.<option value="MAZDA">MAZDA </option>
45.</select>
46.
47.<label for="models">Models</label>
48.<select name="models" id="models">
49.<option value="">Select a Model</option>
50.</select>
51.<br />
52.<p>สุดท้ายคุณเลือก<span id="final_result" style="color:magenta;font-size:1.2em;padding-left:1em;font-weight:bold;"></span></p>
53. </body>
54.</html>
