<%@ 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. 根据id获取某一类的最大最小值

    ->selectRaw('max(marking_price) as maxPrice, min(marking_price) as minPrice, product_id') ->gr ...

  2. 四维动规 洛谷P1004方格取数

    分析:这个题因为数据量非常小,可以直接用四维的DP数组 dp[i][j][k][l]表示第一个人走到位置(i,j),第二个人走到位置[k][l]时所取的数的最大和 状态转移方程可以轻松得出为:dp[i ...

  3. STLC - 软件测试生命周期

    什么是软件测试生命周期(STLC)? 软件测试生命周期(STLC)定义为执行软件测试的一系列活动. 它包含一系列在方法上进行的活动,以帮助认证您的软件产品. 图 - 软件测试生命周期的不同阶段 每个阶 ...

  4. python迭代器概念与应用

    结论 )可迭代对象包含迭代器.2)如果一个对象拥有__iter__方法,其是可迭代对象:如果一个对象拥有next方法,其是迭代器.3)生成器是一种特殊的迭代器,生成器自动实现了“迭代器协议”(即__i ...

  5. 【JS】【1】JavaScript屏蔽Backspace键（避免点击后页面产生回退）

    前言: 1,参考资料:JavaScript屏蔽Backspace键 - 孤傲苍狼 - 博客园(http://www.cnblogs.com/xdp-gacl/p/3785806.html) 2,参考的 ...

  6. 1003. Check If Word Is Valid After Substitutions Medium检查替换后的词是否有效

    网址:https://leetcode.com/problems/check-if-word-is-valid-after-substitutions/ 参考:https://leetcode.com ...

  7. 解决nginx重启“var/run/nginx/nginx.pid" no such file or directory问题

    重启虚拟机后,再次重启nginx会报错“/var/run/nginx/nginx.pid” no such file or directory. 方法一(已试过可行): 到/var/run下看没有ng ...

  8. iOS的Cookie存取

    当前一些公司为了快速出一款app,很多时候采用UINavigationController+WebView或者NavigationController+UITabbarVC+WebView的方式,这样 ...

  9. Oracle物理DG自动切换——Dataguard Broker配置

    1.前言部分 1.1 导读 各位技术爱好者,看完本文后,你可以掌握如下的技能: ① Data Guard Broker 的配置 ② Fast-Start Failover 的配置 ③ Oracle D ...

  10. 通过配置hosts.allow和hosts.deny文件允许或禁止ssh或telnet操作

    1.登录主机,如果是普通账户先切换至root账号 su root 2.编缉/etc/hosts.allow文件 vi /etc/hosts.allow 允许内容 书写格式(改成自自需要的IP或IP段) ...