<%@ 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. 【洛谷p1060】开心的金明

    (DP背包第一题,值得记录思路呀) 开心的金明[传送门] 洛谷算法标签: 01背包问题的思路分析见[总结]01背包问题 这道题显然是典型的01背包问题,首先我们显然可以由输入的第i个物体的价格v[i] ...

  2. Python图片缩放

    from PIL import Image def size(jpg,now_size): im = Image.open(jpg) width, height = im.size if width& ...

  3. python-day91--同源策略与Jsonp

    一.同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之 ...

  4. Thymeleaf使用bootstrap及其bootstrap相关插件（二）

    接上文http://www.cnblogs.com/conswin/p/7929772.html 接下来bootstrap-datepicker的简单使用. 1.引入添加js 和 css 2.然后是h ...

  5. Shell里面获取路径的方式

    1. $0 #!/bin/sh echo $0 2.shFile=$(readlink -f $0) #!/bin/sh shFile=$() shDir=$(dirname ${shFile})ec ...

  6. IDEA 错误：找不到或无法加载主类

    下的java核心编程的源码,只有java文件,没有idea或者eclipse的项目结构信息. 分别用eclipse和idea打开了一遍,方便学习调试. 项目文件夹:E:\学习资料\Java\语法\ja ...

  7. Oracle 11.2.0.4.0 Dataguard部署和日常维护(3)-Datauard监控篇

    1.  v$database    查看当前数据库的角色和保护模式 primary库查看 column NAME format a10 column PROTECTION_MODE format a2 ...

  8. python目录和文件操作

    一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法. 要操作目录,必须引入os模块 import os1.得到当前工作目录,即当前Python脚本工作的目录路径: os ...

  9. learning at commad AT+CPSI

    [Purpose] Learning how to get mobile network info [Eevironment] Shell terminal, base on gcom command ...

  10. 用老毛桃U盘安装：[3]Ghost版Win7系统

    用老毛桃自动安装Ghost版Win7的步骤: 1,到网上先下载Ghost版Win7映像文件到硬盘,我放到的是U盘,盘符为Z,如果你愿意,可直接放到硬盘即可,放到硬盘安装速度会快一点. 2,把制作好的老 ...