如何在PHP中使用ajax jquery将列表框值发送到另一个列表框而不刷新页面

Question

When i select Course in Course listbox automatically load Related Course levels in Course Level Listbox.

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

Check this ajax code and let me know this is correct or not or add new ajax code

Please help me how to load selected Course in Course listbox automatically load Related Course levels in Course Level Listbox. Please help

Answer 1

Your ajax is correct. But instead of reloading page(window.location.href) in success add tag with respective values dynamically in success function itself.

Answer 2

I am assuming that you are fetching data in your function/file "add-itemmaster.php" and returning respective data

$.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>');
            }
        }
   }
});

Also you have to add one hidden element in your DOM with id as "item_fetch_id" to store item fetched course id

like this:

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