select标签的相关操作，选中，获取option的值，二级联动
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
<script>
function selectAllOptionVal() {
var str = "";
$("#select-option-one option").each(function(i) {
var v = $(this).val();
str = str + "\n" + v;
});
alert(str);
}
function selectedOptionVal() {
var s = $("#select-option-one").val();
alert(s);
}
function noSelectedOptionVal() {
var str = '';
$("#select-option-one option").each(function(i) {
if (!$(this).is(":selected")) {
str = str + "\n" + $(this).val();
}
});
alert(str);
}
function oneToTwo() {
v = $("#select-option-one").val();
/*
//获取被选中的参数作为值可以异步获取数据
$.ajax({
});
*/
//为第二级加载数据
//先清空上一次加载的内容
$("[name='select-option-two-option']").remove();
//以下是例子的数据
var arr = new Array(5, 6, 7, 8, 9, 10);
//拼接的html
var str = "";
for (var i = 0; i < arr.length; i++) {
str = str
+ "<option name='select-option-two-option' value='"+arr[i]+"'>"
+ arr[i] + "</option>";
}
//为第二级select添加内容
$("#select-option-two").append(str);
}
</script>
</head>
<body>
<table>
<tr>
<td><select id="select-option-one" onchange="oneToTwo();">
<option value='1'>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value='5'>5</option>
</select> <select id="select-option-two">
</select></td>
<td>
<button onclick="selectAllOptionVal();">获取所有option的值</button>
<button onclick="selectedOptionVal();">获取选中option的值</button>
<button onclick="noSelectedOptionVal();">获取所有未被选中的值</button>
</td>
</tr>
</table>
</body>
</html>
select标签的相关操作，选中，获取option的值，二级联动的更多相关文章
- JS动态获取select中被选中的option的值，并在控制台输出
生活城市: <select id="province"> <option>河南省</option> <option>黑龙江省< ...
- HTML中的<select>标签如何设置默认选中的选项
方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select id = " ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（三）
对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+" ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（二）
对li标签的相关操作——8种方式获取li标签的第一个元素的内容 1.alert($("ul>li").first().html());2.alert($('ul>li' ...
- jq获取被选中的option的值。jq获取被选中的单选按钮radio的值。
温故而知新,一起复习下jq的知识点. (1) jq获取被选中的option的值 <select id="select_id"> <option value=&qu ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（五）
对li标签的相关操作——has与find的差异性 demo代码: <ul> <li><p>1</p></li> <li>2< ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（四）
对li标签的相关操作——五种方式给奇数项li标签设置样式 demo演示: 1 2 3 4 5 6 7 // 详解: 通常我们为多个li添加样式时常用的是使用filter,但我们在第三节中可以看到fil ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（一）
对li标签的相关操作——点击li标签进行样式切换的两种方式 Demo演示: 1 2 3 4 // 详解: 第一种方式(以ul为基础): $("ul").bind("cli ...
- JavaScript or jQuery 获取option value值 以及文本内容的方法
1.html <div class="form-group"> <label>保险公司</label> <select class=&qu ...
随机推荐
- git 提交代码场景
1.首次提交代码到master git init git add . git commit -m '' git remote add origin +address git push -u origi ...
- Symmetric Tree leetcode java
问题描述: Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). ...
- python记录_day14 内置函数二 迭代 二分法
一.匿名函数 形式: lambda 形参:返回值 lambda表示的是匿名函数. 不需要用def来声明, 一句话就可以声明出一个函数.匿名函数不是说一定没名字,而是他们的名字统一称为“lambda”, ...
- 第一阶段——站立会议总结DAY07
未做,有一些作业比较赶,所以,先搁置了它.
- 模拟spring的IoC
1.新建一个web项目,jdk版本为1.8.0_111,使用 Jsp + Servlet + Model 实现MVC模式,并使用BeanFactory工厂 + xml配置文件 + 反射 来解耦合 整个 ...
- Oracle11g温习-第十六章：用户管理
2013年4月27日 星期六 10:50 1.概念 (1)schema : user.object 就是用户创建的对象 (2)用户认证方式: ...
- PHP手册-函数参考-日期与时间相关扩展
一.Calander.日期/时间.HRTime扩展的对比 Calendar 日期/时间 HRTime 简介 历法扩展集包括了一系列用于在不同历法间进行转换的函数,它是以Julian Day计数为中 ...
- C++ leetcode::Reverse Integer
第一天上课,数据库老师说对于计算机系的学生,凡是在课本上学到的专业知识都是过时的.深以为然,感觉大学两年半真的不知道学了什么,为未来感到担忧,C++也不敢说是精通,入门还差不多.最近丧的不行,不管怎么 ...
- zabbix_server.conf、zabbix_agentd.conf配置文件详解
zabbix_server.conf配置文件详解 AlertScriptsPath 默认值:/usr/local/share/zabbix/alertscripts 说明:告警脚本目录 AllowRo ...
- 【oracle】一些的常用命令
命令行连接oracle sqlplus 回车 分别输入用户名和密码 命令行重启oracle数据库 sqlplus /nolog conn 账号/密码 as sysdba shutdow immedi ...