Select标签下拉列表二级联动级联
首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID。
var options=new Array();
$(document).ready(function(){
//二级联动
$('#ddlPages').children('option').each(function(i){
options[i]='<option value="'+$(this).val()+'">'+$(this).text()+'</option>';
});//将option列表放到数组里
$('#ddlPages option:gt(0)').remove(); //清楚下拉
$('#ddlSubsystems').bind('change',function(){ //注册事件
var systemname=$('#ddlSubsystems option:selected').text();
for(var j=0;j<options.length;j++){
$('#ddlPages').append(options[j]);
} //option列表先初始化
$('#ddlPages option:gt(0)').each(function(i){ //遍历排除
var textname=$(this).text();
var index=textname.indexOf('-'+systemname);
if(index<0){
$(this).remove();
}else{
$(this).text(textname.substring(0,index));
}
});
$('#ddlPages').val(0); //默认选中第一行
});
});
Select标签下拉列表二级联动级联的更多相关文章
- 如何用jstl的select标签做二级联动下拉列表框??
下拉列表框的多级联动早就会了.但是用jstl的select标签做下拉列表框的做二级联动的时候还是遇到了些问题.主要问题在用Ajax查询到的数据如何拼成下拉选项的时候.其实很简单,但我还是折腾了好久.所 ...
- select标签实现二级联动
效果如下图所示: 实现的原理:使用onchange事件,原理见代码 html代码: <select id="select" class="sel"> ...
- jQuery下拉列表二级联动插件
jQuery下拉列表二级联动插件的视图代码: <!doctype html> <html lang="en"> <head> <meta ...
- Mybatis + js 实现下拉列表二级联动
Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...
- <select>简易的二级联动
1.首先是表单页面: <tr> <td align="right"> <label class="Validform_label" ...
- select菜单实现二级联动
<tr> <th>执行人<b>*</b></th> <td> <select name="jdcld.ZXDW& ...
- select下拉二级联动
function opt(){ var id = $("#ids").val(); $.ajax({ type: "POST", url: "$ ...
- jQuery 1.3.2 简单实现select二级联动
jQuery 1.3.2 简单实现select二级联动 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
- 通同select便签实现简单的二级联动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 给大家分享一个jQuery TAB插件演示
jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...
- C#基础系列——多线程的常见用法详解
前言:前面几节分别介绍了下C#基础技术中的反射.特性.泛型.序列化.扩展方法.Linq to Xml等,这篇跟着来介绍下C#的另一基础技术的使用.最近项目有点紧张,所以准备也不是特别充分.此篇就主要从 ...
- Go学习
简介 Go语言是Google出了一个语言,基本概念我就不介绍了, GO语言从原生上支持高并发,并提供了简单的调用方式,我们就重点研究一下它的高并发 进程与线程 在介绍高并发之前,我们需要了解一下我们现 ...
- bzoj3343
3343: 教主的魔法 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 1178 Solved: 527[Submit][Status][Discus ...
- 设置 github 帐号user.name和邮箱user.email
git config --global user.name username git config --global user.email username@email.com
- gulp复制整个文件夹或文件到指定目录(包括拷贝单个文件)
整个目录: gulp.task('copy', function() { return gulp.src('src/**/*') .pipe(gulp.dest('dist')) }); gulp拷贝 ...
- Nginx简易配置文件(一)(静态页面及PHP页面解析)
user nobody nobody; worker_processes 4; error_log logs/error.log; pid logs/nginx.pid; events { use e ...
- Codeforces Round #377 (Div. 2) B. Cormen — The Best Friend Of a Man(贪心)
传送门 Description Recently a dog was bought for Polycarp. The dog's name is Cormen. Now Polycarp has ...
- php 错误
ini_set('display_errors', '1');error_reporting(E_ALL ^ E_NOTICE); 有时有了其它框架 应该用它的配置,要不然,你改了,它又改回去了: ...
- ES5语法
ES5新语法主要是体现在Object和.Array操作,同时涉及到JSON. Function.Date 和 String类型上. 1.Object ES5最大的特点是对象扩展很多方法. 新建对象:c ...