jquery ajax 读取联动菜单 select菜单-优快云博客

本文介绍如何使用 jQuery 和 AJAX 实现网页中大类和小类的菜单联动效果。当用户选择大类时，小类下拉框会动态加载对应的小类选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery ajax 读取联动菜单 select菜单

   JavaScript Code
  

   <script type="text/javascript">  
$(document).ready(function()  
{  
$(".country").change(function()  
{  
var id=$(this).val();  
var dataString = 'id='+ id;  
  
$.ajax  
({  
type: "POST",  
url: "ajax.php",  
data: dataString,  
cache: false,  
success: function(html)  
{  
$(".city").html(html);  
}   
});  
  
});  
});  
</script>  

  

   XML/HTML Code
  

   <div style="margin:20px">  
<label>大类:</label> <select name="country" class="country">  
<option selected="selected">--Select--</option>  
<?php  
include('../../conn.php');  
$sql=mysql_query("select * from bigclass");  
while($row=mysql_fetch_array($sql))  
{  
$id=$row['bigclassid'];  
$data=$row['bigclassname'];  
echo '<option value="'.$id.'">'.$data.'</option>';  
 } ?>  
</select> <br/><br/>  
<label>小类 :</label>   
<select name="city" class="city">  
<option selected="selected">--Select--</option>  
</select>  
</div>  

  

ajax.php

   PHP Code
  

   <?php  
include('conn.php');  
if($_POST['id'])  
{  
$id=$_POST['id'];  
$sql=mysql_query("select * from smallclass where bigclassid='$id'");  
  
while($row=mysql_fetch_array($sql))  
{  
$id=$row['smallclassid'];  
$data=$row['smallclassname'];  
echo '<option value="'.$id.'">'.$data.'</option>';  
  
}  
}  
  
?>  

  