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 ...
随机推荐
- 第一阶段——站立会议总结DAY01
1.昨天做了什么:无 2.今天准备做什么:准备开始做个人中心界面,首先是创建页面 3.遇到的困难:“无从下手”,怕写完某个界面之后就会找不到相关的名字接口什么的.
- CentOS7 搭建LVS+keepalived负载均衡
1.实验环境 4台节点 Keepalived1 + lvs1(Director1):192.168.31.4 Keepalived2 + lvs2(Director2):192.168.31.3 Re ...
- 【IDEA】【4】遇到的问题
前言: 1,jar包未导入到项目中 2,报错 cannot resolve symbol 3,左边栏只能看到文件看不到项目结构 4,报错 No valid Maven installation fou ...
- Highcharts 环境配置
Highcharts 环境配置 本章节我们将为大家介绍如何在网页中使用 Highcharts. Highcharts 依赖于 jQuery,所以在加载 Highcharts 前必须先加载 jQuery ...
- 水题系列一：Circle
问题描述:Circle 小明在玩游戏,他正在玩一个套圈圈的游戏.他手里有 L 种固定半径的圆圈,每一种圆 圈都有其固定的数量.他要把这些圆圈套进 N 个圆形槽中的一个.这些圆形槽都有一个最 小半径和最 ...
- 一、Redis的数据类型
一Redis的数据类型 string:字符串 hash:哈希 list:列表 set:集合 zset:有序集合(sorted set) 1.string(字符串) redis最基本的类型.可以理解成与 ...
- noip2014无线网络发射器选址
题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的 129 条东西向街道和 129 条南北向街道所形成的网格状,并且 ...
- PowerShell使用教程
一.说明 1.1 背景说明 个人对PowerShell也不是很熟悉,开始的时候就突然看到开始菜单中多了个叫PowerShell的文件夹,后来一点就看到某个教程视频说PowerShell很厉害但也没怎么 ...
- [IOS微信] PList文件解析，boost数据读取
最近在解析IOS版微信数据中的 mmsetting.archive 文件时,第一次接触到PList文件. 注:mmsetting.archive 不是一个标准的PList文件,其中含有汉字,并且很多 ...
- 逆袭之旅DAY20.XIA.程序调试
2018-07-16 20:25:50 F5:进入方法 F6:单步执行