<%@ 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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <select id="select-option-two">

</select></td>
<td>
<button onclick="selectAllOptionVal();">获取所有option的值</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button onclick="selectedOptionVal();">获取选中option的值</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button onclick="noSelectedOptionVal();">获取所有未被选中的值</button>
</td>
</tr>

</table>

</body>
</html>

select标签的相关操作，选中，获取option的值，二级联动的更多相关文章

  1. JS动态获取select中被选中的option的值，并在控制台输出

    生活城市: <select id="province"> <option>河南省</option> <option>黑龙江省< ...

  2. HTML中的<select>标签如何设置默认选中的选项

    方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  " ...

  3. 前端学习笔记(zepto或jquery)——对li标签的相关操作（三）

    对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+" ...

  4. 前端学习笔记(zepto或jquery)——对li标签的相关操作（二）

    对li标签的相关操作——8种方式获取li标签的第一个元素的内容 1.alert($("ul>li").first().html());2.alert($('ul>li' ...

  5. jq获取被选中的option的值。jq获取被选中的单选按钮radio的值。

    温故而知新,一起复习下jq的知识点. (1) jq获取被选中的option的值 <select id="select_id"> <option value=&qu ...

  6. 前端学习笔记(zepto或jquery)——对li标签的相关操作（五）

    对li标签的相关操作——has与find的差异性 demo代码: <ul> <li><p>1</p></li> <li>2< ...

  7. 前端学习笔记(zepto或jquery)——对li标签的相关操作（四）

    对li标签的相关操作——五种方式给奇数项li标签设置样式 demo演示: 1 2 3 4 5 6 7 // 详解: 通常我们为多个li添加样式时常用的是使用filter,但我们在第三节中可以看到fil ...

  8. 前端学习笔记(zepto或jquery)——对li标签的相关操作（一）

    对li标签的相关操作——点击li标签进行样式切换的两种方式 Demo演示: 1 2 3 4 // 详解: 第一种方式(以ul为基础): $("ul").bind("cli ...

  9. JavaScript or jQuery 获取option value值 以及文本内容的方法

    1.html <div class="form-group"> <label>保险公司</label> <select class=&qu ...

随机推荐

  1. python time 表示方式

  2. Fragment的onCreateView和onActivityCreate之间的区别(转）

    看了有关这个问题的几篇博文,几乎都是引用了stackoverflow上的一个回答: 问题: I know that a fragment’s view hierarchy has to be infl ...

  3. climbing stairs leetcode java

    问题描述: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either ...

  4. IDEA中部署tomcat，运行JSP文件，编译后的JSP文件存放地点总结

    首先保证你正常部署了Tomcat,并且正常在浏览器中运行了JSP文件. 那么Tomcat编译后的JSP文件(_jsp.class 和 _jsp.java)的存放地点: (一)一般存放在你安装的Tomc ...

  5. thinkphp3.1.3导入

    1.首先我们做导入一定要在我们的项目中导入一个   PHPExcel    下载地址:http://phpexcel.codeplex.com/ 2.下载之后就解压我们就可以看到像这样子的文件 3.就 ...

  6. Jmeter的使用简介及实例

    一.安装及配置环境1.安装   java环境   该软件需要java环境,安装jdk,在百度自行查找安装   环境变量配置:变量名JAVA_HOME 值:jdk的安装路径                ...

  7. 一、集合框架（Collection和Collections的区别）

    一.Collection和Map 是一个接口 Collection是Set,List,Queue,Deque的接口 Set:无序集合,List:链表,Queue:先进先出队列,Deque:双向链表 C ...

  8. 你还有没有印象？腾讯QQ16个版本界面你认识多少？

    腾讯公司成立于1998年11月11日(马化腾也曾经戏称“腾讯公司的生日被马云弄成双11购物节了”).1997年,马化腾接触到了ICQ:1998年11月11日,马化腾和同学张志东在广东省深圳市注册成立“ ...

  9. 通过springboot 去创建和提交一个表单(七)

    创建工程 涉及了 web,加上spring-boot-starter-web和spring-boot-starter-thymeleaf的起步依赖. 1 2 3 4 5 6 7 8 9 10 11 1 ...

  10. linux ssh root登陆出现错误：Permission denied, please try again

    密码已检测过多遍还是登录失败 经检查 vim /etc/ssh/sshd_config PermitRootLogin no 改成 PermitRootLogin yes 修改之后重启就可以了