Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > ช่วยอธิบายโค้ดนี้หน่อยครับ ไปดูฝรั่งทำแล้วเอามาทำเองไม่ได้

ช่วยอธิบายโค้ดนี้หน่อยครับ ไปดูฝรั่งทำแล้วเอามาทำเองไม่ได้

เริ่มหัวข้อใหม่

Ada Wong

โพสกระทู้ ( 3 )
บทความ ( 0 )

ผมเอามาจากที่นี่ครับ
https://www.webslesson.info/2017/05/json-dynamic-dependent-select-box-using-jquery-and-ajax.html

จากที่ผมศึกษาและดัดแปลง ผมเกิดปัญหาตรงที่ พอเลือกอันแรกไปแล้ว อันต่อไปมันไม่ขึ้น

นี่โค้ดของผมครับ

regstu_add.php

<?php
include ('connection.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<LINK REL="SHORTCUT ICON" HREF="img/favicon.ico" />
<link href="css/bootstrap.min1.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<title></title>
	<script type="text/javascript">
		message = " สมัครเข้าเรียนวิทยาลัยเทคนิคสุราษฎร์ธานี                            ";
		function step() {
			message = message.substr(1) + message.substr(0,1);
			document.title = message.substr(-30,40);
		}
	</script>
    <style type="text/css">
		@font-face {
		font-family: THSarabunNew;
		src: url(fonts/THSarabunNew.ttf) format("truetype");
		}
		@font-face {
		font-family: THSarabun;
		src: url(fonts/THSarabun.ttf) format("truetype");
		}
		@font-face {
		font-family: EkkamaiStandard;
		src: url(fonts/EkkamaiStandard-Light.ttf) format("truetype");
		}
		body { font-family: 'THSarabunNew', sans-serif; }
		link1 {font-size: 17px;}
	</style>
  </head>
<body onload="setInterval(step,250)">
<nav class="navbar navbar-light" style="background-color: #00008B;">
    <a class="navbar-brand" href="index.php"><img src="img/favicon.ico" width="30" height="30" class="d-inline-block align-top" alt="">
    <font color=“#9900CC” style="font-family:THSarabunNew;" size="5" class="text-white" class="font-weight-bold"> ระบบรับสมัครนักเรียนนักศึกษาวิทยาลัยเทคนิคสุราษฏร์ธานี</font>
  </a>
</nav>
<br><font style="font-family:THSarabunNew;" size="6" class="font-weight-bold"><center>สมัครเข้าเรียนวิทยาลัยเทคนิคสุราษฎร์ธานี</center></font>
<font style="font-family:THSarabunNew;" size="4" class="font-weight-bold">
<br>
<center>
<div class="container">
<form action="regstu_add_db.php" method="POST" enctype="multipart/form-data"  name="add" class="form-horizontal" id="add">
  <div class="form-group">
    <div class="col-sm-5" align="right"> หมายเลขประจำตัวประชาชน </div>
    <div class="col-sm-3" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><input type="text" name="thid" id="thid" class="form-control" required></font>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-5" align="right"> คำนำหน้าชื่อ </div>
    <div class="col-sm-3" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><select name="ntitle" id="ntitle" class="form-control" required>
        <option value="?">เลือกคำนำหน้าชื่อ</option>
        <option value="นาย">นาย</option>
        <option value="นาง">นาง</option>
        <option value="นางสาว">นางสาว</option>
      </select></font>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-5" align="right"> ชื่อ - สกุล </div>
    <div class="col-sm-3" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><input type="text" name="flname" id="flname" class="form-control" required></font>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-5" align="right"> เพศ </div>
    <div class="col-sm-2" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><select name="sex" id="sex" class="form-control" required>
        <option value="00">เลือกเพศ</option>
        <option value="ชาย">ชาย</option>
        <option value="หญิง">หญิง</option>
      </select></font>
    </div><br></br>
  <div class="form-group">
    <div class="col-sm-5" align="right"> ที่อยู่ </div>
    <div class="col-sm-3" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><textarea class="form-control" name="address" id="address"rows="5"></textarea></font>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-5" align="right"> เบอร์โทรศัพท์ </div>
    <div class="col-sm-3" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><input type="text" name="tel" id="tel" class="form-control" required></font>
    </div>
  </div>
   <div class="form-group">
    <div class="col-sm-5" align="right"> สถานศึกษาเดิม </div>
    <div class="col-sm-3" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><input type="text" name="oldsc" id="oldsc" class="form-control" required></font>
    </div><br></br>
    <div class="form-group">
    <div class="col-sm-5" align="right"> วุฒิที่จบ </div>
    <div class="col-sm-3" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><select name="quaend" id="quaend" class="form-control" required>
        <option value="00">เลือกวุฒิการศึกษา</option>
        <option value="ม.6">ม.3</option>
        <option value="ม.6">ม.6</option>
        <option value="ปวช.">ปวช.</option>
        <option value="ปวส.">ปวส.</option>
      </select></font>
    </div><br></br>
    <div class="form-group">
    <div class="col-sm-5" align="right"> สาขาที่จบ </div>
    <div class="col-sm-3" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><input type="text" name="subend" id="subend" class="form-control" required></font>
    </div><br></br>
    <div class="form-group">
    <div class="col-sm-5" align="right"> เกรดเฉลี่ย </div>
    <div class="col-sm-3" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><input type="text" name="grade" id="grade" class="form-control" required></font>
    </div>
  </div>
  <div class="form-group">
  <div class="col-sm-5" align="right"> ระดับชั้นที่ต้องการสมัคร </div>
  <div class="col-sm-3" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><select name="quareg" id="quareg" class="form-control" required>
        <option value="00">เลือกระดับชั้นที่ต้องการสมัคร</option>
        <option value="ปวช.">ปวช.</option>
        <option value="ปวส.">ปวส.</option>
        <option value="ปริญญาตรี">ปริญญาตรี</option>
      </select></font>
    </div><br></br>
  <div class="form-group">
  <div class="col-sm-5" align="right"> สาขาที่ต้องการสมัคร ( อันดับที่ 1 ) </div>
    <div class="col-sm-3" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><select name="subreg" id="subreg" class="form-control" required>
        <option value="00">เลือกสาขาที่ต้องการสมัคร</option>
        <option value="ยานยนต์">สาขางานยานยนต์</option>
        <option value="เครื่องมือกล">สาขางานเครื่องมือกล</option>
        <option value="แม่พิมพ์โลหะ">สาขางานแม่พิมพ์โลหะ</option>
        <option value="โครงสร้าง">สาขางานโครงสร้าง</option>
        <option value="ไฟฟ้ากำลัง">สาขางานไฟฟ้ากำลัง</option>
        <option value="อิเล็กทรอนิกส์">สาขางานอิเล็กทรอนิกส์</option>
        <option value="ก่อสร้าง">สาขางานก่อสร้าง</option>
        <option value="สถาปัตยกรรม">สาขางานสถาปัตยกรรม</option>
        <option value="อุตสาหกรรมยาง">สาขางานอุตสาหกรรมยาง</option>
        <option value="เทคนิคขึ้นรูปพลาสติก">สาขางานเทคนิคขึ้นรูปพลาสติก</option>
        <option value="เทคโนโลยีสารสนเทศ">สาขางานเทคโนโลยีสารสนเทศ</option>
        <option value="เทคโนโลยีระบบราง">สาขางานเทคโนโลยีระบบราง</option>
      </select></font>
    </div>
  </div><br>
  <div class="form-group">
  <div class="col-sm-5" align="right"> สาขาที่ต้องการสมัคร ( อันดับที่ 2 ) </div>
    <div class="col-sm-3" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><select name="subreg1" id="subreg1" class="form-control" required>
        <option value="00">เลือกสาขาที่ต้องการสมัคร</option>
        <option value="ยานยนต์">สาขางานยานยนต์</option>
        <option value="เครื่องมือกล">สาขางานเครื่องมือกล</option>
        <option value="แม่พิมพ์โลหะ">สาขางานแม่พิมพ์โลหะ</option>
        <option value="โครงสร้าง">สาขางานโครงสร้าง</option>
        <option value="ไฟฟ้ากำลัง">สาขางานไฟฟ้ากำลัง</option>
        <option value="อิเล็กทรอนิกส์">สาขางานอิเล็กทรอนิกส์</option>
        <option value="ก่อสร้าง">สาขางานก่อสร้าง</option>
        <option value="สถาปัตยกรรม">สาขางานสถาปัตยกรรม</option>
        <option value="อุตสาหกรรมยาง">สาขางานอุตสาหกรรมยาง</option>
        <option value="เทคนิคขึ้นรูปพลาสติก">สาขางานเทคนิคขึ้นรูปพลาสติก</option>
        <option value="เทคโนโลยีสารสนเทศ">สาขางานเทคโนโลยีสารสนเทศ</option>
        <option value="เทคโนโลยีระบบราง">สาขางานเทคโนโลยีระบบราง</option>
      </select></font>
    </div>
  </div><br>
  <div class="form-group">
  <div class="col-sm-5" align="right"> สาขาที่ต้องการสมัคร ( อันดับที่ 3 ) </div>
    <div class="col-sm-3" align="left">
    <font style="font-family:EkkamaiStandard;" size="5" class="font-weight-bold"><select name="subreg2" id="subreg2" class="form-control" required>
        <option value="00">เลือกสาขาต้องการสมัคร</option>
        <option value="ยานยนต์">สาขางานยานยนต์</option>
        <option value="เครื่องมือกล">สาขางานเครื่องมือกล</option>
        <option value="แม่พิมพ์โลหะ">สาขางานแม่พิมพ์โลหะ</option>
        <option value="โครงสร้าง">สาขางานโครงสร้าง</option>
        <option value="ไฟฟ้ากำลัง">สาขางานไฟฟ้ากำลัง</option>
        <option value="อิเล็กทรอนิกส์">สาขางานอิเล็กทรอนิกส์</option>
        <option value="ก่อสร้าง">สาขางานก่อสร้าง</option>
        <option value="สถาปัตยกรรม">สาขางานสถาปัตยกรรม</option>
        <option value="อุตสาหกรรมยาง">สาขางานอุตสาหกรรมยาง</option>
        <option value="เทคนิคขึ้นรูปพลาสติก">สาขางานเทคนิคขึ้นรูปพลาสติก</option>
        <option value="เทคโนโลยีสารสนเทศ">สาขางานเทคโนโลยีสารสนเทศ</option>
        <option value="เทคโนโลยีระบบราง">สาขางานเทคโนโลยีระบบราง</option>
      </select></font>
    </div>
  </div><br>
<br>
อัพโหลดรูปภาพนักเรียนนักศึกษา (ไฟล์ JPEG)<input type="file" name="picUpload" accept="image/jpeg"><br>
อัพโหลดเอกสารสำหรับสมัครเข้าศึกษา (ไฟล์ PDF)<input type="file" name="filUpload" accept="application/pdf"><br>
  <div class="form-group">
    <div class="col-sm-3"> </div>
    <div class="col-sm-6">
      <button type="submit" class="btn btn-primary  btn-lg btn-block" id="btn"> บันทึกข้อมูล </button>
			<button type="cancel" class="btn btn-danger btn-lg btn-block" value=" ยกเลิก " onclick="window.location='index.php' " /> ยกเลิก </button>
    </div>
  </div>
</form>
</div>
</center>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="navbar position fixed" style="background-color: #00008B;">
						<font color = "white"><p>© 2020 Suratthani Technical College All rights reserved.</p></font>
</nav>
</body>
<script>
$(document).ready(function(){

load_json_data('quareg');

function load_json_data(id, parent_id)
{
 var html_code = '';
 $.getJSON('dropdown.json', function(data){

  html_code += '<option value="">เลือกระดับชั้นที่ต้องการสมัคร</option>';
  $.each(data, function(key, value){
   if(id == 'quareg')
   {
    if(value.parent_id == '0')
    {
     html_code += '<option value="'+value.name+'">'+value.name+'</option>';
    }
   }
   else
   {
    if(value.parent_id == parent_id)
    {
     html_code += '<option value="'+value.name+'">'+value.name+'</option>';
    }
   }
  });
  $('#'+id).html(html_code);
 });

}

$(document).on('change', '#quareg', function(){
 var subreg_id = $(this).val();
 if(subreg_id != '')
 {
  load_json_data('subreg', subreg_id);
 }
 else
 {
  $('#subreg').html('<option value="">เลือกสาขาวิชาที่ต้องการสมัคร</option>');
 }
});
$(document).on('change', '#subreg', function(){
 var state_id = $(this).val();
 if(state_id != '')
 {
  load_json_data('city', state_id);
 }
 else
 {
  $('#city').html('<option value="">Select city</option>');
 }
});
});
</script>

[head]dropdown.json/head]

[
 {
  "id":"1",
  "name":"ปวช.",
  "parent_id":"0"
 }, 
 {
  "id":"2",
  "name":"ปวส.",
  "parent_id":"0"
 }, 
 {
  "id":"3",
  "name":"ปริญญาตรี",
  "parent_id":"0"
 }, 
 {
  "id":"4",
  "name":"New York",
  "parent_id":"1"
 }, 
 {
  "id":"5",
  "name":"Alabama",
  "parent_id":"1"
 }, 
 {
  "id":"6",
  "name":"California",
  "parent_id":"1"
 }, 
 {
  "id":"7",
  "name":"Ontario",
  "parent_id":"2"
 }, 
 {
  "id":"8",
  "name":"British Columbia",
  "parent_id":"2"
 }, 
 {
  "id":"9",
  "name":"New South Wales",
  "parent_id":"3"
 }, 
 {
  "id":"10",
  "name":"Queensland",
  "parent_id":"3"
 }, 
 {
  "id":"11",
  "name":"New York city",
  "parent_id":"4"
 }, 
 {
  "id":"12",
  "name":"Buffalo",
  "parent_id":"4"
 }, 
 {
  "id":"13",
  "name":"Albany",
  "parent_id":"4"
 }, 
 {
  "id":"14",
  "name":"Birmingham",
  "parent_id":"5"
 }, 
 {
  "id":"15",
  "name":"Montgomery",
  "parent_id":"5"
 }, 
 {
  "id":"16",
  "name":"Huntsville",
  "parent_id":"5"
 }, 
 {
  "id":"17",
  "name":"Los Angeles",
  "parent_id":"6"
 }, 
 {
  "id":"18",
  "name":"San Francisco",
  "parent_id":"6"
 }, 
 {
  "id":"19",
  "name":"San Diego",
  "parent_id":"6"
 }, 
 {
  "id":"20",
  "name":"Toronto",
  "parent_id":"7"
 }, 
 {
  "id":"21",
  "name":"Ottawa",
  "parent_id":"7"
 }, 
 {
  "id":"22",
  "name":"Vancouver",
  "parent_id":"8"
 }, 
 {
  "id":"23",
  "name":"Victoria",
  "parent_id":"8"
 }, 
 {
  "id":"24",
  "name":"Sydney",
  "parent_id":"9"
 }, 
 {
  "id":"25",
  "name":"Newcastle",
  "parent_id":"9"
 }, 
 {
  "id":"26",
  "name":"City of Brisbane",
  "parent_id":"10"
 }, 
 {
  "id":"27",
  "name":"Gold Coast",
  "parent_id":"10"
 }
]

Tag : PHP, MySQL, HTML, CSS, Ajax, jQuery

ประวัติการแก้ไข
2020-02-09 22:49:27

Date : 2020-02-09 22:47:33

By : thisbook

View : 917

Reply : 3

No. 1

mr.v

โพสกระทู้ ( 4,756 )
บทความ ( 8 )

Bootstrap ใช้มันทั้ง 3 และ 4 จะซ้ำซ้อนเละเทะไปไหน? ใช้อันใดอันหนึ่งสิครับ.

แล้วการแก้ปัญหา ถ้ามันติดปัญหาตรงไหน ควรหาทางเลาะไปที่ต้นตอหรือจุดที่เป็นปัญหา อาจลองทำหน้าต้นแบบทดลองก็ได้ เอาเน้นๆเฉพาะที่มีปัญหา มันจะแก้ง่าย อาจจะแก้ด้วยตัวเองภายในไม่ถึงชม.ก็ได้.
การไล่เอาเฉพาะที่มีปัญหามาหาทางแก้มันจะทำให้เราตรวจตราลงไปได้ละเอียดขึ้นด้วย เพราะมันไม่ตีขลุมมั่วไปหมดอะไรต่ออะไร...
ยกตัวอย่าง ผมตัดเอาเฉพาะที่มีปัญหาไว้บน jsfiddle แล้วรัน แล้วก็ไล่แก้ไปเรื่อย มันก็ได้ เวลาได้ก็เอาไปเทียบเอาเองว่าจะต้องเอาไปปรับงานจริงตรงจุดไหนบ้าง.

https://jsfiddle.net/zn2j04f5/
ส่วน .json ผมเอาไปไว้ที่ myjson.com http://myjson.com/qjfvs ดังนั้นถ้าเอาไปใช้งานจริงอย่าลืมตรวจตรงนี้ด้วยให้ URL ตรงงานจริง ไม่ใช่ก๊อปดะอย่างเดียว.

ในส่วนของโค้ดใน jsfiddle นั้น ส่วนที่ผมแก้ไปก็คือ เขียนค่า value="..." ในแท็ก <option> เสียใหม่ ให้มันเป็น id. อันนี้รวมทั้ง value ใน javascript ด้วย.
Code (JavaScript)

'<option value="' + value.id + '">' + value.name + '</option>'

ไม่ใช่แบบข้างล่างนี้
Code (JavaScript)

'<option value="' + value.name + '">' + value.name + '</option>'

ในเมื่อมันเทียบค่าด้วย id, parent_id ดังนั้นค่าที่ส่งไปก็ต้องเป็น id.

Date : 2020-02-10 00:29:41

By : mr.v

No. 2

Ada Wong

โพสกระทู้ ( 3 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : [b]mr.v เมื่อวันที่ 2020-02-10 00:29:41

รายละเอียดของการตอบ ::

ขอบคุณสำหรับคำแนะนำมากๆครับ ผมยังใหม่มากๆสำหรับการเขียนเว็บ จะพยายามพัฒนาต่อไปครับ

[/b]

Date : 2020-02-10 07:23:03

By : thisbook

No. 3

Guest

น่าจะยังไม่ศึกษา SA

Date : 2020-02-12 08:42:24

By : นิรนาม

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ช่วยอธิบายโค้ดนี้หน่อยครับ ไปดูฝรั่งทำแล้วเอามาทำเองไม่ได้

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก