<!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. java中的四种权限

    1.私有权限(private) private可以修饰数据成员,构造方法,方法成员,不能修饰类(此处指外部类,不考虑内部类).被private修饰的成员,只能在定义它们的类中使用,在其他类中不能调用. ...

  2. Machine Learning - week 2 - 编程练习

      3. % J = COMPUTECOST(X, y, theta) computes the cost of using theta as the % parameter for linear r ...

  3. CentOS 7.4系统优化/安装软件

    源改为国内源 阿里云yum源 https://opsx.alibaba.com/mirror 清华yum源 https://mirrors.tuna.tsinghua.edu.cn/ 网易163yum ...

  4. javascript实例:显示时间

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. python获取当前目录路径和上级路径

    在使用python的时候总会遇到路径切换的使用情况,如想从文件夹test下的test.py调用data文件夹下的data.txt文件: . └── folder ├── data │ └── data ...

  6. Android系统移植与调试之------->增加一个双击物理按键打开和关闭闪光灯并将闪光灯状态同步到下拉菜单中

    最近有一个客户有这样的需求: 1.在[设置]--->[无障碍]中添加一个开关按钮. 如果打开开关的话,双击某个物理按键的时候,打开闪光灯,再双击该物理按键的时候,关闭闪光灯. 如果关闭开关的话, ...

  7. 我的Android进阶之旅------>Android关于dp(dip)、sp转px的工具类

    下面是一个工具类,提供了dp.sp.px之间相互转化的方法. import android.content.Context; /** * dp.sp 转换为 px 的工具类<br> * & ...

  8. always on 技术

    always on 技术系列:https://blog.csdn.net/dba_huangzj/article/details/54015470 MSSQL 2014 /WIN SERVER 200 ...

  9. jqprint 打印网页 jQuery print plugin

    ref://jQuery print plugin <!DOCTYPE html> <html lang="en"> <script src=&quo ...

  10. GIS学习和开发的在线资源

    1.OpenGIS Consortium标准,http://www.opengeospatial.org.著名的OGC标准是每个GIS开发者最后都不得不学习的,或深或浅. 2.SharpMap,Pro ...