jQuery load Select Box
8 ก.ค. 2016 , 3,276 Views , หมวดหมู่ jQuery,JavaScript,Ajax PHP ทุกหมวดหมู่ โค๊ดดิ้ง ,
ตัวอย่างเช่น เลือก Select Box ที่เป็นแผนกแล้วให้ดึง Select Box เฉพาะ Staff ที่อยู่ใน แผนกนั้นขึ้นมา
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<form> แผนก : <select name="roleid_" id="roleid_" class="txtBox" style="width:200px;"> <option value="" ></option> <option value="1" >แผนก IT</option> <option value="2" >แผนกบัญชี</option> </select> พนักงาน : <select id="userid" name="userid" class="txtBox" style="width:200px;"> </select> <img src="loading.gif" id="loading_img" style="vertical-align:middle; margin-left:5px; display:none;" /> </form> <script type="text/javascript"> function loadSelectBox(id,url,selected){ $.get( url,{},function(data){ $(id).html(data); if (selected!=''){ $(id+' option[value='+selected+']').attr('selected','selected'); } $("#loading_img").hide(); } ); } //ดึง Staff มาแสดง $("#roleid_").on('change', function() { if($("#roleid_").val()!= ""){ $("#loading_img").show(); var userid = ''; loadSelectBox( '#userid', 'getStaff.php?roleid_='+$("#roleid_").val(), userid ); } }); //หากมีการส่งค่า role และ userid เช่น กรณีมีการ submit ค่าเข้ามา หรือการแก้ไข <?php if($_REQUEST['roleid_']){ ?> var userid = '<?php echo $_REQUEST['userid']; ?>'; loadSelectBox( '#userid', 'getStaff.php?roleid_='+$("#roleid_").val(), userid ); <?php } ?> </script> |
ในหน้า getStaff.php จะมีการส่งค่าตัวแปล roleid_ มาก็ให้เขียนโค๊ดดึงรายชื่อ Staff ที่อิงตาม roleid_ นี้ขึ้นมา
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php if($_REQUEST['roleid_']){ require_once('connect.inc.php'); echo '<option value="">---All Staff---</option>'; $query = " SELECT * FROM staff WHERE roleid=".$_REQUEST['roleid_']; $r = $adb->pquery($query, array()); while($row = $adb->fetch_array($r)){ echo '<option value="'.$row['id'].'">'.$row['first_name'].' '.$row['last_name'].'</option>'; } } ?> |
