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 ...
随机推荐
- Watto and Mechanism CodeForces - 514C (字典树,哈希)
大意: 给定字符串集$S$, 每次询问给出字符串$a$, 求$S$中是否存在一个字符串恰好与$a$相差一个字符. 直接建字典树暴力复杂度是$O(n\sqrt{n})$, 也可以用set维护所有哈希值, ...
- Misha and Palindrome Degree CodeForces - 501E (回文串计数)
大意: 给定字符串, 求多少个区间重排后能使原串为回文串. 先特判掉特殊情况, 对于两侧已经相等的位置之间可以任意组合, 并且区间两端点至少有一个在两侧相等的位置处, 对左右两种情况分别求出即可. # ...
- 2017-2018 ACM-ICPC Latin American Regional Programming Contest D.Daunting device
题意:一个数组n个操作每次先查询p颜色的数量然后求出区间,区间染色成x,然后求最大染色数 题解:odt裸题,多维护一个color个数数组就好了 //#pragma comment(linker, &q ...
- SQL 经典回顾：JOIN 表连接操作不完全指南
2017-02-23 小峰 ITPUB 点击上方“蓝字”可以关注我们哦  |转载自:码农网 |原文链接:www.codeceo.com/article/sql-join-guide.html ...
- mybatis调用存储过程的两种方式
先总结和说明一下注意点: 1.如果传入的某个参数可能为空,必须指定jdbcType 2.当传入map作为参数时,必须指定JavaType 3.如果做动态查询(参数为表名,sql关键词),可以使用${} ...
- Hadoop---日志服务器
Hadoop---日志服务器 1.历史服务器: 启动: 1)测试使用: 1.做一个任务: 2.接受任务: 3.执行任务: 4.执行任务完成: 2)日志文件产生: 成功后: 失败后: 点击进入His ...
- Analytic Functions in Oracle
Contents Overview and IntroductionHow Analytic Functions WorkThe SyntaxExamplesCalculate a running T ...
- Linux定时计划（crontab）使用说明
一.设置定时计划步骤 第一步,编缉计划文件:crontab -e 第二步,在文件中写入计划,格式如:minute hour day month week command.如0 8 * * * sh / ...
- net core 模型绑定与之前版本的不同-FromBody 必须对应Json格式
之前有一个用于七牛上传图片的Callback Url的WebAPI (之前是用.net4.0,运行正常) 代码如下: // 七牛CallBack地址,CallbackBody内容name=upload ...
- Java 9中新的货币API
译文出处: Java译站 原文出处:Michael Scharhag JSR 354定义了一套新的Java货币API,计划会在Java 9中正式引入.本文中我们将来看一下它的参考实现:JavaMo ...