频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
jquery ajax 读取联动菜单 select菜单
2013-11-29 15:49:14           
收藏   我要投稿
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>';  

  

}  

}  

  

?>  

 

点击复制链接 与好友分享!回本站首页
相关TAG标签 菜单
上一篇:javascript脚本实现日历控件
下一篇:屏蔽F1~F12的快捷键的js函数
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站