<!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. pycharm如何自定义模板?

    按照上图箭头方向设置即可.

  2. php自定义函数: 改进升级版curl

    <?php function dcurl($url, $method = 'GET', $postFields = null, $header = null) { $ch = curl_init ...

  3. 从jarray中删除指定元素的问题

    string jsonText = "[{\"a\": \"aaa\",\"b\": \"bbb\",\&qu ...

  4. ubuntu下MySQL无法启动Couldn't find MySQL server (/usr/bin/mysqld_safe)”

    一台虚拟测试机,启动的时候,报上述错误,从这个报错来看,多半是因为读取到了另外的my.cnf导致的 那么,my.cnf放置在什么地方? 可以通过如下指令获取到 root@mysql:~# mysqld ...

  5. python并发之IO模型（二）

    blocking IO (阻塞IO) 在linux中,默认情况下所有的socket都是blocking,一个典型的读操作流程大概是这样: 当用户进程调用了recvfrom这个系统调用,kernel就开 ...

  6. ubuntu 安装Nodejs

    ubuntu 安装Nodejs 1.在软件管理器里面安装nodejs2.由于版本很老,所以需要更新版本:先安装npm , sudo apt install npm然后用npm安装 n 命令,更新nod ...

  7. Retrofit2.2说明-简单使用

    很久前就想学习下Retrofit了,不过总是没有时间,正好最近新项目要用到网络请求,正好研究了下Retrofit2.2的简单使用方法,大致记录如下: Retrofit与okhttp共同出自于Squar ...

  8. loadrunder脚本篇——执行操作系统命令

    思路: 用loadrunner system()函数 函数原型: int system( const char *string ); 示例一:在指定目录下创建指定文件 Action() { char ...

  9. DataTable Group By或运算 Linq Aggregate的使用

    class Program { static void Main(string[] args) { DataTable dt = new DataTable(); dt.Columns.Add(&qu ...

  10. java中类名.class, class.forName(), getClass()区别

    Class对象的生成方式如下: 1.类名.class           说明: JVM将使用类装载器, 将类装入内存(前提是:类还没有装入内存),不做类的初始化工作.返回Class的对象 2.Cla ...