<!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. PowerDesigner之设置(2)——扩展属性

    数据库:SQL2000 PD版本:16 在PowerDesigner之设置(1)中,创建表的表头注释部分由于中文的原因无法定长,这里我们用PD的扩展方法来解决. 具体方法如下: 主菜单DataBase ...

  2. vue之v-bind:style

    <div class="collect" @click="collected=!collected"> <i class="fa f ...

  3. 《从零开始学Swift》学习笔记（Day 47）——final关键字

    原创文章,欢迎转载.转载请注明:关东升的博客 在类的定义中使用final关键字声明类.属性.方法和下标.final声明的类不能被继承,final声明的属性.方法和下标不能被重写. 下面看一个示例: f ...

  4. virgo使用指南

    一.说明: 一个windows虚拟桌面软件,很小,不到10K,占用内存也极小.超级方便. 二.GitHub地址: henkman/virgo: Virtual desktops for Windows ...

  5. influxDB---数据库操作SQL

    查询 查询不能只查tag标签,一定要加上fields. 如:select val,"班组" FROM "测试表" WHERE dev = 'cs123' and ...

  6. Python迭代器包itertools（转）

    原文:http://www.cnblogs.com/vamei/p/3174796.html 作者:Vamei 在循环对象和函数对象中,我们了解了循环器(iterator)的功能.循环器是对象的容器, ...

  7. random模块一些常用的东西

    import random#一.随机小数# (1)大于0且小于1之间的小数print(random.random())# (2)大于1且小于9之间的小数print(random.uniform(0,9 ...

  8. PAT 1071. 小赌怡情(15) JAVA

    1071. 小赌怡情(15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 常言道“小赌怡情”.这是一个很简单的 ...

  9. （2.3）学习笔记之mysql基础操作（表/库操作）

    本系列学习笔记主要讲如下几个方面: 本文笔记[六:表操作--线上可以直接删除表吗?] 附加:库操作 [1]创建制定字符集的数据库 需求描述: 在创建DB的时候指定字符集. 操作过程: 1.使用crea ...

  10. Zookeeper配置说明

    转载自:https://my.oschina.net/u/2338362/blog/399361 Zookeeper的安装和配置十分简单, 既可以配置成单机模式, 也可以配置成集群模式. 下面将分别进 ...