一个筛选功能的实现

一生小白 2017-09-11 10:16:09 
<tr>

                <th class="xjright">部门</th>

                <th class="xjleft" >

                    <select name="classbu">

                        <option value="技术部">技术部</option>

                        <option value="财务部">财务部</option>

                        <option value="人力部">人力部</option>

                    </select>

                </th>

                <th class="xjright">科室</th>

                <th class="xjleft" >

                    <select name="classke" style="width: 100px;">

                        <option value="开发科">开发科</option>

                        <option value="会计科">会计科</option>

                        <option value="行政科">行政科</option>

                    </select>

                </th>

选择部门，然后实现与其对应的科室功能怎么实现，应该是用JS，具体怎么实现。
给各位添麻烦了。
...全文
473 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
hongmei85 2017-09-12
  • 打赏
  • 举报
 回复
[code=htm] <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> new document </title> <meta name="keywords" content=""/> <meta name="description" content=""/> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> <!-- $(document).ready(function(){ $("select[name='classbu']").change(function(){$("select[name='classke']").get(0).selectedIndex = this.selectedIndex}); }); //--> </script> </head> <body> <table> <tr> <th class="xjright">部门</th> <th class="xjleft" > <select name="classbu"> <option value="技术部">技术部</option> <option value="财务部">财务部</option> <option value="人力部">人力部</option> </select> </th> <th class="xjright">科室</th> <th class="xjleft" > <select name="classke" style="width: 100px;"> <option value="开发科">开发科</option> <option value="会计科">会计科</option> <option value="行政科">行政科</option> </select> </th> </tr> </table> </body> </html> [/code]
一生小白 2017-09-12
  • 打赏
  • 举报
 回复
引用 1楼hongmei85 的回复:
每个部门对应哪些科室？
嗯，一个部门对应一个科室，选择前面部门，自动出来与其对应科室
一起混吧 2017-09-12
  • 打赏
  • 举报
 回复
引用 5 楼 weixin_40048408 的回复:
[quote=引用 4 楼 jordan102 的回复:] 
<tr>
                <th class="xjright">部门</th>
                <th class="xjleft" >
                    <select name="classbu" onchange="foo(this)">
                        <option value="技术部">技术部</option>
                        <option value="财务部">财务部</option>
                        <option value="人力部">人力部</option>
                    </select>
                </th>
                <th class="xjright">科室</th>
                <th class="xjleft" >
                    <select name="classke" style="width: 100px;" id="classke">
                        <option value="开发科">开发科</option>
                        <option value="会计科">会计科</option>
                        <option value="行政科">行政科</option>
                    </select>
                </th>
				<script>
				function foo(o){
					var select = document.getElementById("classke");
					select.options[o.selectedIndex].selected = true; 
				}
				</script>
报了错。 select.options[o.selectedIndex].selected = true;这句话报错[/quote]建议把你改后的代码贴出来，另外错误信息是什么？
一生小白 2017-09-12
  • 打赏
  • 举报
 回复
引用 3 楼 hongmei85 的回复:
[code=htm] <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> new document </title> <meta name="keywords" content=""/> <meta name="description" content=""/> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> <!-- $(document).ready(function(){ $("select[name='classbu']").change(function(){$("select[name='classke']").get(0).selectedIndex = this.selectedIndex}); }); //--> </script> </head> <body> <table> <tr> <th class="xjright">部门</th> <th class="xjleft" > <select name="classbu"> <option value="技术部">技术部</option> <option value="财务部">财务部</option> <option value="人力部">人力部</option> </select> </th> <th class="xjright">科室</th> <th class="xjleft" > <select name="classke" style="width: 100px;"> <option value="开发科">开发科</option> <option value="会计科">会计科</option> <option value="行政科">行政科</option> </select> </th> </tr> </table> </body> </html> [/code]
谢谢你，麻烦你能不能帮我解释一下这个 $("select[name='classbu']").change(function(){$("select[name='classke']").get(0).selectedIndex = this.selectedIndex});
一生小白 2017-09-12
  • 打赏
  • 举报
 回复
引用 4 楼 jordan102 的回复:
<tr>
                <th class="xjright">部门</th>
                <th class="xjleft" >
                    <select name="classbu" onchange="foo(this)">
                        <option value="技术部">技术部</option>
                        <option value="财务部">财务部</option>
                        <option value="人力部">人力部</option>
                    </select>
                </th>
                <th class="xjright">科室</th>
                <th class="xjleft" >
                    <select name="classke" style="width: 100px;" id="classke">
                        <option value="开发科">开发科</option>
                        <option value="会计科">会计科</option>
                        <option value="行政科">行政科</option>
                    </select>
                </th>
				<script>
				function foo(o){
					var select = document.getElementById("classke");
					select.options[o.selectedIndex].selected = true; 
				}
				</script>
报了错。 select.options[o.selectedIndex].selected = true;这句话报错
一起混吧 2017-09-12
  • 打赏
  • 举报
 回复 
<tr>
                <th class="xjright">部门</th>
                <th class="xjleft" >
                    <select name="classbu" onchange="foo(this)">
                        <option value="技术部">技术部</option>
                        <option value="财务部">财务部</option>
                        <option value="人力部">人力部</option>
                    </select>
                </th>
                <th class="xjright">科室</th>
                <th class="xjleft" >
                    <select name="classke" style="width: 100px;" id="classke">
                        <option value="开发科">开发科</option>
                        <option value="会计科">会计科</option>
                        <option value="行政科">行政科</option>
                    </select>
                </th>
				<script>
				function foo(o){
					var select = document.getElementById("classke");
					select.options[o.selectedIndex].selected = true; 
				}
				</script>
hongmei85 2017-09-11
  • 打赏
  • 举报
 回复
每个部门对应哪些科室？
VueCli3实战项目-还原饿了么订餐app2(商家排序筛选和搜索)
该系列课程是饿了么系列课程的第二部分, 主要实现的功能是首页内容, 商家排序, 商家筛选, 下拉刷新上拉加载, 搜索商家商品名称等功能
Android 商品筛选功能实现
Android 商品筛选功能实现 前段时间做了个网上商城项目，里面含有类似京东商品搜索功能，感觉此功能普遍适用所有在此贴出实现步骤 先看效果 主页面的布局 由于布局简单，就不多啰嗦了，只是在外面放了一个 DrawerLayout 布局，让筛选页面作为 DrawerLayout 的一个菜单页显示。 筛选页面布局 &amp;amp;lt;?xml version=&amp;quot;1.0&amp;q
用Excel筛选功能实现WPS表格多条件筛选功能
通常，我们使用WPS的筛选功能时，输入栏一般会提示以下文字“支持多条件筛选，例如：北京 上海”，只要按照格式输入条件就能一次性筛选出大量的数据，那么在Excel中应该如何实现类似的操作呢？ #解决办法： 使用Excel的筛选功能 首先筛选出第一次要筛选出的内容，然后再次使用筛选器图标，输入新的搜索条件，然后“将当前所选内容添加到筛选器”，若有更多条件，重复执行第二次的操作即可。 使用高级...
jquery 实现筛选功能。
商品属性筛选商品的属性筛选 是一个十分常见的功能，通常是同一类型的属性只能选择一个。例如 价格范围，或者品牌，为了使选择的内容看上去更直观 ，一般都会将选择项列出，并拥有点击取消 选择 ，点击同类替换的功能。 在下面给出两个完整实现。实现1：使用jquery 的appendTo 让点击的元素加入到列出项里面 （同时检测列出项是否有同一类的元素，有则替换出来，使它返回原列表），在列出项里面点击元素
基础编程

21,886

社区成员

140,364

社区内容

发帖
与我相关
我的任务
社区描述
从PHP安装配置，PHP入门，PHP基础到PHP应用
社区管理员
  • 基础编程社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章