如何在PHP中使用ajax jquery將列表框值發送到另一個列表框而不刷新頁面

Question

當我在“課程列表”框中選擇“課程”時，會自動在“課程級別列表”框中加載“相關課程”級別。

  <script type="text/javascript" src="js/jquery.js"></script>
<div>Course:<select name="course_id" id="course_id" class="list_box">
<option name="" value="">Select</option>
<?php 
$course_sql=mysql_query("select * from tbl_course_master");
while($course=mysql_fetch_array($course_sql))
{
?>
<option value="<?php echo $course['id'];?>" <?php if($item_fetch['course_id']==$course['id']) { echo "selected='selected'"; } ?> ><?php echo $course['course'];?></option>
<?php } ?>
</select>
</div>


<div> Course Level:
<select name="course_level_id" id="course_level_id" class="list_box">
<option name="" value="">Select</option>
<?php 
$course_level_sql=mysql_query("select * from tbl_course_level where course_id='$_GET[course_id]'") or die(mysql_error());
while($course_level=mysql_fetch_array($course_level_sql))
{
?>
<option value="<?php echo $course_level['id'];?>" <?php if($item_fetch['course_level_id']==$course_level['id']) { echo "selected='selected'"; } ?> ><?php echo $course_level['level'];?></option>
<?php } ?>
</select>
</div>

  Here the ajax code what iam using is
    <script>
$("#course_id").live("change",function(){
var course_id=$(this).val();
//alert(course_id);
$.ajax({
            url:"add-itemmaster.php",
            type: 'GET',
            data:{course_id: course_id},
            success:function(data){
            window.location.href=link;
            }

        }); // end ajax
});
</script>

檢查此ajax代碼，並讓我知道這是正確的還是添加新的ajax代碼

請幫助我如何在“課程列表”框中加載選定的課程，並自動在“課程級別列表”框中加載相關課程級別。 請幫忙

Answer 1

你的ajax是正確的。 但是，與其成功地重新加載page（window.location.href），不如在成功函數本身中動態添加帶有相應值的標記。

Answer 2

我假設您正在獲取函數/文件“ add-itemmaster.php”中的數據並返回各自的數據

$.ajax({
   url:"add-itemmaster.php",
   type: 'GET',
   data:{course_id: course_id},
   success:function(data){
        var item_fetch_id = $('#item_fetch_id').attr('rel');
        for(var i in data) {
            if(item_fetch_id  == data[i].course_level_id) {
                $('#course_level_id').append('<option value=' + data[i].course_level_id + ' selected>' + data[i].course_level + '</option>');
            } else {
                $('#course_level_id').append('<option value=' + data[i].course_level_id + '>' + data[i].course_level + '</option>');
            }
        }
   }
});

另外，您還必須在DOM中添加一個ID為“ item_fetch_id”的隱藏元素，以存儲獲取的課程ID

像這樣：

<input type="hidden" id="item_fetch_id" rel="<?php echo $item_fetch['course_id'];?>">