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 ...
随机推荐
- python基础之 025 模块加载与import的使用
内容梗概: 1. 模块 2. import 3. from xxx import xxx 1.模块定义:模块就是一个包含了python定义和声明的文件,文件名就是模块的名字加上.py后缀.目前写的所有 ...
- 第二阶段——个人工作总结DAY03
1.昨天做了什么:昨天实现了一个活动跳转到另一个活动. 2.今天做了什么:今天打算将所有的都实现,并且只用一个监听事件封装. 3.遇到的困难:无.
- k8s相关端口表-以及周边工具
k8s端口 kube-api 6443 kube-controller-manager 10252 kube-scheduler 10251 kubelet 10250 kube-proxy 1025 ...
- 5月17 AJAX返回类型-------JSON和XML
ajax返回类型有TEXT,JSON,XML 一.TEXT 查看之前的练习 二.JSON var js = { aa:{code:"p001",name:"张三" ...
- 3月22 关于CSS
CSS(Cascading Style Sheep 叠层样式表,作用是美化HTML网页)/*注释内容*/ 为注释的方法. 样式表的分类: 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差, ...
- spring ，springmvc的常用标签注解
一:spring常用的注解: @Configuration把一个类作为一个IoC容器,它的某个方法头上如果注册了@Bean,就会作为这个Spring容器中的Bean.@Scope注解 作用域@Lazy ...
- 详谈Oracle12c新特点容器数据库&可插拔数据库（CDB&PDB）
一般信息 数据字典 CDB_FILE$ DBA_PDBS PDB$SEED CDB_LOCAL_ADMINAUTH$ DBA_PDB_HISTORY PDB_HISTORY$ CDB_PDB_SAVE ...
- ActiveMQ 消息的重新投递
正常情况下:consumer 消费完消息后,会发送"标准确认"给 broker,这个确认对象以 MessageAck 类表征: // 省略其他代码.类中定义了各种确认的类型 pub ...
- Qt Widgets——菜单和菜单栏
主窗口MainWindow需要菜单栏QMenuBar及菜单QMenu来组成自身,一般应用程序的所有功能都能在菜单中找到.接下来就来说说它们. QMenu 它添加了很多动作QAction,并用自身组成了 ...
- nginx反向代理配置相对路径
需求: 在公司内部搭建了一个php的网站,想用花生壳映射到外网. 一.反向代理解决直接映射不成功问题 直接用把花生壳的"域名+端口"指向此php网站并竟然不生效.但是不加网站名可以 ...