<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>