html二级select 联动展示

select标签实现二级联动

效果如下图所示: 实现的原理:使用onchange事件,原理见代码 html代码: <select id="select" class="sel"> <option value="weiguo">魏国</option> <option value="shuguo">蜀国</option> <option value="wuguo">吴国

1.js cities = new Object(); cities['河北省']=new Array('石家庄', '张家口市', '承德市', '秦皇岛市', '唐山市', '廊坊市', '保定市', '沧州市', '衡水市', '邢台市', '邯郸市'); cities['山西省']=new Array('太原市', '大同市', '朔州市', '阳泉市', '长治市', '晋城市', '忻州地区', '吕梁地区', '晋中市', '临汾地区', '运城地区'); function set

省市联动_简单的Demo，适用于各种二级菜单联动

最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动或者省市县三级等,一般这样的数据会有一张单独的数据表, 需要用的话,通过查询数据库获得相应的数据,返回一个JSNO,在前台进行处理显示. 但是这个功能没有单独的表,总共七个一级菜单,每个一级菜单下对应N个二级菜单,考虑到数据量不大,没有必要去改变原有的数据库表结构,就想到了用简单的JS去实现这个需求

JavaScript(jquery)实现二级菜单联动

为什么写这篇随笔? 二级菜单的联动一直是我心中一块石头,犹记得大一的时候只会用一点的Dreamweaver,当时做二级菜单难受啊,啥都不会,网上找了些资料,也看不懂别人的代码更别说用起来了前些日子.NET的课上用到了一个下拉菜单的控件,于是就决定整理出来以备有需要的人参考表单部分: <form> 学院: <select id="college"> <option >-----请选择------ <option value="经济学

JS中简单的二级城市联动

代码奉上: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>二级城市联动</title></head><body> <select id="one" onchange="func(this.value)"> <option value=

Ajax和JSON完成二级菜单联动的功能

首先需要找好JSON的包哦: 链接:http://pan.baidu.com/s/1jH6gN46 密码:lbh1 1:首先创建一个前台页面,比如secondMenu.jsp,源码如下所示: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3

select联动遇到的问题

今天写了个select下拉联动,记录下过程中遇到的问题. dom部分 // 拿到选中项的索引 myselect.selectedIndex // 拿到选中项的text/value myselect.options[index].text; 删除元素下的所有子元素常用三种 //方法一: while(selectObj.firstChild) { selectObj.removeChild(selectObj.firstChild); } //方法二: selectObj.innerHTML =

实现select联动效果，数据从后台获取

效果如下: 当type值选择完后,amount值会自动相应填入. 1. 从后台获取数据,为一个数组,里面包含多个对象. <select id="scholarshipTypeSelect" resultType="com.entity.scholarshipTypeUser"> select first.id, first.type, second.amount from scholarshipType first,scholarshipType sec

前端基础之BOM和DOM(响应式布局、计时器、搜索框、select联动)

一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”. DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素. 二.window对象所有浏览器都支持 window 对象.它表示浏览器窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个

JS BOM DOM对象 select联动计时器时间 css操作节点(标签 ) 查找标签 {前端基础之BOM和DOM}

前端基础之BOM和DOM 前戏到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DOM相关知识. JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”. DOM (Document Object Model)是指文档对象

前端基础之BOM和DOM和三个小示例(计时器、搜索框、select联动)

一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”. DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素. 二.window对象所有浏览器都支持 window 对象.它表示浏览器窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个

vue select二级城市联动及第二级默认选中第一个option值

当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了 <div class="inputLine"> <span>所在区域</span> <select name="" v-model="countryName" @change="selectCountry"> <option :value=

form表单select联动

下拉列表:二级联动菜单 Select对象的常用属性 options[]:返回所有option组成的一个数组: name:名称 value:option的value的值 length:设置或读取option的个数 selectedIndex:当前选中的option的索引号 option对象的常用属性 text:指<option></option>中的文本 value:指option对象的value属性 index:指每个option对象的索引号 selected:当前option是否

jquery json实现二级动态联动

以下为代码!需要导入json架包 function getCity1(){ var unitid = document.getElementById('addformunitid').value; $.getJSON("../unit/getcity.do?unitid="+unitid, "", function(response){ //$ ("#departmentid").show();//将隐藏的select显示出来 $ ("

基于jQuery+JSON的省市县二级三级联动效果

省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. HTML 首先在head中载入jquery库和cityselect插件. <script type="text/javascript" src="js/jquery.js"></script> <script ty

angular2 select 联动

界面操作触发大分类id改变,根据id获取二级分类的数据进行绑定显示. html: <div style="overflow: hidden;float: left;padding-left: 38px"> <div style="margin-bottom: 10px;display:inline-block;"> <span> 选择大分类:</span> <div class="select"

Js实现select联动，option从数据库中读取

待要实现的功能:页面有两个select下拉列表,从第一个select中选择后,在第二个select中出现对应的列表选择,再从第二个select中选择后,在一个text中显示对应的信息.两个select和text的数据全部来自oracle数据库,该功能用js实现. 首先我们先定义两个select和text: <select id="department" style="width: 80px" onChange="selectChange(this.v

关于select联动的两种做法

第一种方法: function dong(){ var getSheng = document.getElementById("sheng"); var getShi = document.getElementById("shi"); var where = getSheng.selectedIndex; for(var j=0;j<getShi.length;j++){//清除二级城市的选项 getShi

Excel实现二级菜单联动

项目中需要导入一个Excel模板需要实现二级联动,现记录如下: 首先看一下原始数据,原始信息在一张工作表,第一行是省市名称,下面的若干行为对应省市下面的地名和区名.需要在另外一张工作表中A列和B列建立联动的二级下拉菜单. 2 首先,选中原始表的所有数据(包括多余的空白单元格),按F5或者Ctrl+G调出定位对话框.选择左下角的[定位条件]. 3 如下图,选则[常量],并点击[确定]按钮.这样,所有的非空单元格被选中. 选择功能区的[数据]-[有效性]-[根据所选内容创建]. 由于标题在第

layui select 联动渲染赋值不了数据的问题

今天用 layui做select的时候,数据老是看不到,而且联动的数据是对不上的,看了网上一堆是最后要用 form.render('select'); 这个是必须的, 但是我用了还是这样,其实是layui里面做联动的话,ajax要设置成同步数据 async: false !! // 监听select form.on('select(menu)', function(data){ var mid = data.value; $.ajax({ url: 'x x x x', type: 'post

layui的select联动 - CSDN博客

要实现联动效果注意两点: 第一要可以监听到select的change事件: 第二异步加载的内容,需要重新渲染后才可以正常使用. html结构: <form class="layui-form batchinput-form" action="" id="box-form"> <div class="layui-form-item" ><div class="layui-input-i