文档章节

在多条件查询中点击查询,在列表框中实现栏目的自动选择

D
 Demolady
发布于 2016/10/18 19:57
字数 619
阅读 47
收藏 0

1.一级栏目的自动选择
        通过name 来找到列表框select,将列表框的值改为表单传出的值,如果表单未做出选择(即通过点击管理跳入lists界面 并未通过表单传值),则默认传入的值为0,值为0时显示的是'请选择';
            <script type="text/javascript">
                $("[name='fcid']").val(<?php echo isset($_POST['fcid'])?$_POST['fcid']:0?>);
                getCateSon();
            </script>
        getCateSon() 是生成子栏目的一个函数,如果在这里不执行该函数,则在点击查询后子栏目的列表框中将不会显示栏目。
    2.二级栏目的自动选择
        1>在完成二级栏目的自动选择之前,还需要进行二级栏目的自动生成,也就是getCateSon()函数的编写
            需要达到的效果是,在选择一级栏目后,子栏目框会自动生成一级栏目下的所有子栏目。所以这里就需要在一级栏目下添加onchange事件,在改变后调用函数 onchange="getCateSon()"
            函数中要运用ajax实现异步传输,将选择后的一级栏目id 传给控制器, 如NewsController下的 actionCate(),由这个方法通过一级栏目找到它下面的所有子栏目,并生成option字符串,进行输出。由ajax接收response,并进行处理,将字符串输入到子栏目select下。

                function getCateSon(){
                    //获取一级栏目id
                    var fcid = $("[name='fcid']").val();
                    //通过ajax把栏目id传给控制器news->action
                    if(fcid !=0){
                    $.ajax({
                        'url':"<?php echo $this->createUrl('news/cate')?>",
                        'data':'fcid='+fcid,
                        'success':function(re){
                            //ajax处理返回值
                            $("[name='cateid']").html(re);
                        }
                    });
                     }else{
                        $("[name='cateid']").html('<option value="0">请选择</option>');
                     }
                    
                }
            中间的if判断的意思是在用户未对一级栏目做出选择就提交表单后,无需执行ajax来生成子栏目列表,可以直接跳过该操作。否则会在子栏目列表框中显示出所有的一级栏目
        2>要实现二级栏目的自动选择 则需要在上述的代码中再额外添加一行
            function getCateSon(){
                        //获取一级栏目id
                        var fcid = $("[name='fcid']").val();
                        //通过ajax把栏目id传给控制器news->action
                        if(fcid !=0){
                        $.ajax({
                            'url':"<?php echo $this->createUrl('news/cate')?>",
                            'data':'fcid='+fcid,
                            'success':function(re){
                                //ajax处理返回值
                                $("[name='cateid']").html(re);
        ->                        $("[name='cateid']").val(<?php echo isset($_POST['cateid'])?$_POST['cateid']:0?>);
                            }
                        });
                         }else{
                            $("[name='cateid']").html('<option value="0">请选择</option>');
                         }
                        
                    }

© 著作权归作者所有

D
粉丝 0
博文 10
码字总数 2561
作品 0
杭州
后端工程师
私信 提问
open-JWeb(RAD)快速开发平台介绍

Open-JWeb(Java Web)快速开发平台用户操作手册 王保政 Msn:baozhengw999@hotmail.com QQ:29803446 声明:从即日 2008 年 1 月 31 日起 ,原名为CZTZ-JavaEE快速开发平台更名为Open-JWeb (RA...

迷途d书童
2012/03/09
553
0
vue实现对表格数据的增删改查

在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作。比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改。在v...

wudized
2017/07/10
0
0
OpenJweb 1.6中自定义组合查询条件的实现方式

昨天发布的是列表页上列出的查询字段如何定义,本文讲述的是自定义组合查询条件的实现. 通过平台生成的页面中,不仅有在列表页面上展示的查询条件列(这些查询条件列是在表字段信息中设置为查...

迷途d书童
2012/03/09
636
0
0061 Form和提交的概念以及基本数据输入控件

  上节课主要讲解了PHP代码和HTML代码进行配合实现动态数据网页的方法。   这节课开始讲解前端网页如何和后端数据进行交互来实现更复杂的功能。   Form标签的概念和作用   上节课编写...

零基础学编程
2018/10/09
0
0
使用Eclipse构建Maven的SpringMVC项目 【转】

首先Eclipse需要安装Maven的插件,地址:http://m2eclipse.sonatype.org/sites/m2e。 用MyEclipse安装Maven插件,建出的Maven项目有些问题。一是,发布tomcat的时候resources总是不会被发布到...

如何让他和
2016/10/19
92
1

没有更多内容

加载失败,请刷新页面

加载更多

Spark之RDD

一、RDD的概述 1.1 什么是RDD? RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变、可分区、里面的元素可并行计算的集合。RDD具有...

不羁之后
5分钟前
0
0
Kubernetes云供应商架构的未来

首先,我想分享SIG的使命,因为我们用它来指导我们现在和将来的工作。从我们的章程中直接来看,SIG的使命是简化,开发和维护云供应商集成,作为Kubernetes集群的扩展或附加组件。这背后的动机...

Linux就该这么学
10分钟前
0
0
线程池没你想的那么简单

前言 原以为线程池还挺简单的(平时常用,也分析过原理),这次是想自己动手写一个线程池来更加深入的了解它;但在动手写的过程中落地到细节时发现并没想的那么容易。结合源码对比后确实不得...

crossoverJie
18分钟前
5
0
Scientific Linux开发停止 相关设备将迁移至CentOS上

在经历了将近14年的版本更迭之后,这个专注于科学领域的GNU/Linux发行版本不会发布下个重大版本更新--Scientific Linux 8了。 目前维护该发行版本的成员最终决定是时候休息了,今后将不再发布...

linuxCool
22分钟前
0
0
Redux

Redux概念 Redux = Reducer + Flux,数据层框架,将所有数据都存储到store中 Redux的工作流程 Antd的使用 安装npm install antd --save import 'antd/dist/antd.css'import { Input, Butto......

星闪海洋
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部