jquery + php实现二级联动

最新推荐文章于 2021-03-10 12:01:43 发布

weixin_30485379

最新推荐文章于 2021-03-10 12:01:43 发布

阅读量95

点赞数

文章标签： php

原文链接：http://www.cnblogs.com/zhengyu4767/archive/2013/05/24/3096423.html

版权

以下是利用jquery、ajax、php实现下拉框的二级联动功能:

下拉框效果：，当选择学院后，系统会自动查询出相应的专业；

代码：

html

 1 <html>
 2 <head>
 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4 
 5 <script type="text/javascript" src="ajax.js"></script> 6 <script type="text/javascript" src="resource/jquery/jquery-1.8.2.js"></script>
 7 </head>
 8 
 9 <body>
10 学院:
11 <select name="department" id="department" style="width:100px;">
12 {foreach from=$department_ary item=dep}
13 <option value="{$dep.id}">{$dep.name}</option>
14 {/foreach}
15 </select><br />
16 
17 专业:
18 <select name="major" id="major" style="width:100px;"></select>
19 </body>
20 </html>

以下是ajax.js

 1 $(document).ready(function(){
 2     //判断是否首次加载
 3     var major_html = $("#major").html();
 4     if(major_html == ''){
 5         getMajor($(this).find("option:selected").text(), $(this).find("option:selected").val());
 6     }
 7 
 8     //改变学院时
 9     $("#department").change(function(){
10         var department_name = $(this).find("option:selected").text();
11         var department_val = $(this).find("option:selected").val();
12         //alert(department_name + ":" + department_val);
13         //$("#major").html("<option value='1'>" + department_name + "</option>");
14         
15         getMajor(department_name, department_val);
16     });
17     
18 });
19 
20 function getMajor(department_names, department_vals){    
21     var queryStr = "";
22     var major_ary = new Array();
23 
24     //返回格式[{"major_id":"6","major_name":"\u82f1\u8bed","department_id":"3"}]
25     $.post("test.php?act=ajax", {department_name:department_names, department_val:department_vals}, function(data){
26         var result = data;
27 
28         //清空选项
29         $("#major").html("");
30         for(var json in result){
31             $("#major").html($("#major").html() + "<option value='" + result[json].major_id + "'>" + result[json].major_name + "</option>");
32         }
33         
34     }, 'json');
35 }

以下是test.php代码:

 1 <?php
 2 include('./libs/db.php');
 3 include_once('smarty_init.php');
 4 include_once('./libs/department_service.php');
 5 
 6 if($_REQUEST['act'] == 'ajax'){
 7     $department_name = $_POST['department_name'];
 8     $department_val = $_POST['department_val'];
 9     
10     if($department_name != '' && $department_val != ''){
11         //返回格式{'num':1, 'rows':[{'major_id':1, 'major_name':'hardware'}, {'major_id':2, 'major_name':'software'}]}
12         $json = json_encode(getAllMajorByDepId($department_val));
13 
14         echo $json;
15     }
16 }else{
17     //获取所有的系信息
18     $department_ary = getAllDepartment();
19     $smarty->assign('department_ary', $department_ary);
20 
21     $smarty->display('test.html');
22 }
23 
24 ?>

转载于:https://www.cnblogs.com/zhengyu4767/archive/2013/05/24/3096423.html

weixin_30485379

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery + php实现二级联动

以下是利用jquery、ajax、php实现下拉框的二级联动功能:下拉框效果：，当选择学院后，系统会自动查询出相应的专业；代码：html 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4 5 &l...
复制链接

扫一扫