<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

#cssId{

	width:200px;

	height:50px;

	background-color:#FFFF66;

}

#textId{

	width:200px;

	background-color:#999999;

}

</style>

<script type="text/javascript">

function change(selNode)

{

	var value = selNode.options[selNode.selectedIndex].value;

	var cssId = document.getElementById("cssId");

	cssId.style.textTransform = value;

	var textId = document.getElementById("textId");

	textId.innerHTML = "text-transform: " + value;

}

</script>

</head>

<body>

<div id="cssId">

	Good good study,Day day up!!

</div>

<p/>

<select id="selId" onchange="change(this)">

	<option value="none">--选择样式--</option>

	<option value="capitalize">首字母大写</option>

	<option value="uppercase">所有字母大写</option>

	<option value="lowercase">所有字母小写</option>

</select>

<p/>

<div id="textId">

	text-transform:node;

</div>

</body>

</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

function selCity()

{

	var arr = [["--选择省份--"],

				["北京城市一","北京城市二","北京城市三"],

				["上海城市一","上海城市二","上海城市三"],

				["广州城市一","广州城市二","广州城市三"],

				["深圳城市一","深圳城市二","深圳城市三"] ];

	var selNode = document.getElementById("selid");

	var subselNode = document.getElementById("subselid");

	var index = selNode.selectedIndex;

	var citys = arr[index];

	//方法一

	subselNode.options.length = 0;

	/* 方法二

	for(var j=0; j<subselNode.options.length;)  //不要j++， options.length删除一个已经变化

	{

		alert(subselNode.options.length);

		subselNode.removeChild(subselNode.options[j]);

	} */

	for(var i=0; i<citys.length; i++)

	{

		var optionNode = document.createElement("option");

		optionNode.innerText = citys[i];

		subselNode.appendChild(optionNode);

	}

}

</script>

</head>

<body>

<select id="selid" onchange="selCity(this)">

	<option>--选择省份--</option>

	<option>北京</option>

	<option>上海</option>

	<option>广州</option>

	<option>深圳</option>

</select>

<select id="subselid">

	<option>--选择省份--</option>

</select>

</body>

</html>

JavaScript -- Input Select 操作, 级联菜单的更多相关文章

  1. jQuery对input select操作小结

    //遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] ...

  2. javascript实现select菜单／级联菜单（用Rails.ajax实现发送请求，接收响应）

    在购物网站,填写收货地址的时候,会出现XX省XX市XX区的下拉菜单,如何实现此功能?思路是什么? 功能设置: 当选择省select菜单后,市的select菜单为这个省的城市列. 当选择市菜单后,区菜单 ...

  3. javascript级联菜单，数据从数据库中获取

    1.html代码: <%@ page contentType="text/html; charset=gb2312" %> <%@ page import=&qu ...

  4. 使用JavaScript数组实现省份和城市的级联菜单

    查看本章节 查看作业目录 需求说明: 使用数组实现省份和城市的级联菜单.具体要求如下 在页面中添加城市时,根据选择的省份,动态地添加该省份的城市 页面加载完毕后,第一个列表框填充"两湖两广& ...

  5. Excel操作之级联菜单

    设置级联菜单主要用的是excel的数据验证功能.下面以简单的设置城市选择框为例: 1.准备好数据 2.给所有省份起个名称(例如:省份),然后同样方法给每个省份所对应的城市以其省份命名,(例如:南京.苏 ...

  6. JS动态级联菜单

    JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...

  7. Ajax实现动态的二级级联菜单

    今天花了点时间用Ajax实现了一个二级级联菜单.整理总结一下.为了把重点放在Ajax和级联菜单的实现上,本文省略了数据库建表语句和操作数据库的代码! 数据库建表语句就不帖出来了.主要有两张表,区域表: ...

  8. Python之路day13 web 前端（JavaScript，DOM操作）

    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...

  9. thinkphp 级联菜单实现

    养殖场->栋舍级联菜单 //获取默认养殖场和栋舍信息 public function sbjr(){ $yzc_model=M("Yzc"); $list = $yzc_mo ...

随机推荐

  1. Native VLAN打上标记

    802.1Q和ISL都知道两者的区别在于前者对native vlan的流量不打标记,而后者统一都打标记. 配置成Native VLAN的Trunk端口,收到Native VLAN的帧后,不打标记直接从 ...

  2. OSPF-lsa-types

  3. CF 617E【莫队求区间异或和】

    E. XOR and Favorite Number time limit per test 4 seconds memory limit per test 256 megabytes input s ...

  4. LIS(模板)

    记录一下,O(nlgn)的算法求LIS //HHH #include <iostream> #include <stdio.h> #include <string.h&g ...

  5. getParameterMap的使用

    就是前端提交到Servlet或者Action里面的参数Map哈,如果你是以表单提交,那么request.getParameterMap()中将包含你表单里面所有input标签的数据,以其name为ke ...

  6. redis add 'vm.overcommit_memory = 1' to /etc/sysctl.conf

    w root@well:/etc# vim sysctl.conf #kernel.domainname = example.com # # /etc/sysctl.conf - Configurat ...

  7. B-Tree vs LSM-tree

    什么是B-树 一.已排序文件的查找时间 对一个有N笔记录的已排序表进行二叉查找,可以在O(log2N)比较级完成.如果表有1,000,000笔记录,那么定位其中一笔记录,将在20 ( log21,00 ...

  8. Python常见序列详解

    一.Python中序列的分类 常见序列类型包括字符串(普通字符串和unicode字符串),列表和元组.所谓序列,即成员有序排列,可通过下标访问. 二.Python序列通用操作 下面我们将分别以字符串. ...

  9. Shell Script Practice 2 Summary

    [这篇博客主要是我个人对这个任务的总结, 主要目的不是拿来和分享的, 所以难免让人感觉不知所云, 请直接忽视这篇即可.] 处理任务为两个输入文件comfe(1,000,000行,文件结构"域 ...

  10. Eclipse Find/Replace

    1.Eclipse内容助手 选中Regular expressions,使用正则表达式进行匹配.图中出现了小黄灯,Ctrl+Space显示出帮助信息. 2.Wrap search(循环检索)选中后,检 ...