jquery ajax 读取联动菜单 select菜单

jquery ajax 读取联动菜单 select菜单

 

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

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

</p>  

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

  

}  

}  

  

?>