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 ...
随机推荐
- linux指令统计日志出现的次数
cat XXX.log|grep ''|grep '条件'| wc -l 单个条件统计 cat XXX.log|grep ''|grep '条件1'|grep '条件2'|grep '条件3' ...
- Oracle11g版本中未归档隐藏参数
In this post, I will give a list of all undocumented parameters in Oracle 11g. Here is a query to se ...
- 常用java命令
javap 反编译 javap xxx.class 查看大概 javap -v -p xxx.class 查看详细 jps 查看有哪些java进程 jinfo 查看或设置java进程的 vm 参数,只 ...
- Pandas初学者代码优化指南
原文:A Beginner’s Guide to Optimizing Pandas Code for Speed 作者:Sofia Heisler 翻译:无阻我飞扬 摘要:Pandas 是Pytho ...
- linux使用lvresize和resize2fs调整lv大小
以下操作基于场景:有两个同vg的lv(applv和rootlv),我们需要从applv腾出1G给rootlv. 1.缩小applv磁盘 lvresize -L -1G /dev/mapper/myvg ...
- commonJS 和 ES6 模块化的不同
commonjs 导出 module.exports={ add:function(){ console.log('add测试') } } 导入 var add=require('./add.js') ...
- post和get的使用场景和区别
使用场景: 区别: ①传送方式不同:get通过地址栏传输,post通过报文传输. ②get产生一个TCP数据包,post产生两个数据包,对于get方式的请求,浏览器会把http header和data ...
- 据说excel流是这么做，上次我分享的是csv格式。这个是excel格式。
import xlwt import StringIO import web urls = ( '/rim_request','rim_request', '/rim_export','rim_exp ...
- TreeMap - 源代码学习笔记
TreeMap 实现了 NavigableMap 接口,而NavigableMap 接口继承于 SortedMap接口. 所有本文还会记录 SortedMap 和 NavigableMap 的阅读笔记 ...
- 前端基础之jQuery操作标签
一.样式操作 样式类 addClass(); // 添加指定的CSS类名. removeClass(); // 移除指定的CSS类名. hasClass(); // 判断样式存不存在 toggleCl ...