1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6.  
  7. <style type="text/css">
  8. #cssId{
  9. 	width:200px;
  10. 	height:50px;
  11. 	background-color:#FFFF66;
  12. }
  13.  
  14. #textId{
  15. 	width:200px;
  16. 	background-color:#999999;
  17. }
  18. </style>
  19.  
  20. <script type="text/javascript">
  21. function change(selNode)
  22. {
  23. 	var value = selNode.options[selNode.selectedIndex].value;
  24. 	var cssId = document.getElementById("cssId");
  25.  
  26. 	cssId.style.textTransform = value;
  27.  
  28. 	var textId = document.getElementById("textId");
  29. 	textId.innerHTML = "text-transform: " + value;
  30. }
  31. </script>
  32.  
  33. </head>
  34.  
  35. <body>
  36.  
  37. <div id="cssId">
  38. 	Good good study,Day day up!!
  39. </div>
  40.  
  41. <p/>
  42. <select id="selId" onchange="change(this)">
  43. 	<option value="none">--选择样式--</option>
  44. 	<option value="capitalize">首字母大写</option>
  45. 	<option value="uppercase">所有字母大写</option>
  46. 	<option value="lowercase">所有字母小写</option>
  47. </select>
  48. <p/>
  49.  
  50. <div id="textId">
  51. 	text-transform:node;
  52. </div>
  53. </body>
  54. </html>

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <script type="text/javascript">
  7.  
  8. function selCity()
  9. {
  10. 	var arr = [["--选择省份--"],
  11. 				["北京城市一","北京城市二","北京城市三"],
  12. 				["上海城市一","上海城市二","上海城市三"],
  13. 				["广州城市一","广州城市二","广州城市三"],
  14. 				["深圳城市一","深圳城市二","深圳城市三"] ];
  15.  
  16. 	var selNode = document.getElementById("selid");
  17. 	var subselNode = document.getElementById("subselid");
  18. 	var index = selNode.selectedIndex;
  19. 	var citys = arr[index];
  20.  
  21. 	//方法一
  22. 	subselNode.options.length = 0;
  23. 	/* 方法二
  24. 	for(var j=0; j<subselNode.options.length;)  //不要j++， options.length删除一个已经变化
  25. 	{
  26. 		alert(subselNode.options.length);
  27. 		subselNode.removeChild(subselNode.options[j]);
  28. 	} */
  29. 	for(var i=0; i<citys.length; i++)
  30. 	{
  31. 		var optionNode = document.createElement("option");
  32. 		optionNode.innerText = citys[i];
  33. 		subselNode.appendChild(optionNode);
  34. 	}
  35. }
  36.  
  37. </script>
  38.  
  39. </head>
  40.  
  41. <body>
  42.  
  43. <select id="selid" onchange="selCity(this)">
  44. 	<option>--选择省份--</option>
  45. 	<option>北京</option>
  46. 	<option>上海</option>
  47. 	<option>广州</option>
  48. 	<option>深圳</option>
  49. </select>
  50.  
  51. <select id="subselid">
  52. 	<option>--选择省份--</option>
  53. </select>
  54.  
  55. </body>
  56. </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. python清除字符串中间空格的方法

    1.使用字符串函数replace >>> a = 'hello world' >>> a.replace(' ', '') 'helloworld' 看上这种方法真 ...

  2. POJ 1039 Pipe【经典线段与直线相交】

    链接: http://poj.org/problem?id=1039 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22013#probl ...

  3. crontab 问题分析 - CSDN博客 https://blog.csdn.net/tengdazhang770960436/article/details/50997297

    cd /mnt/tools/trunk/plugins/personas; python update_keywords.py crontab 问题分析  crontab 问题分析 - CSDN博客 ...

  4. c#调用c++带有回调函数方法的实现

    最近完成了一个C++版本的对外sdk程序,其中有部分回调函数使用. C++程序使用时没有异常,但是在C#环境下使用时出了点问题,简单总结下. 感谢博客:http://blog.csdn.net/son ...

  5. Testlink安装访问提示“应用程序DEFAULT WEB SITE”中的服务器错误

    错误摘要:HTTP错误403.14 - ForbiddenWeb服务器被配置为不列出此目录的内容.

  6. MySQL第二天

    回顾 数据库基础知识: 关系型数据库(磁盘)和非关系型数据库(内存)     关系型数据库: 建立在关系模型上的数据库 数据结构: 二维表(比较浪费空间) 操作数据的指令集合: SQL(DDL,DML ...

  7. 【python】获取列表中最长连续数字

    最近开发遇到一个功能需求,目的是要获取一个AI分析结果中最长连续帧,比如一个视频中连续3帧有人,那么我认为这个视频就是有人,我就要判断这个视频帧列表中是否有连续的三帧有人.本质就是获取列表中的最长连续 ...

  8. Python2 socket 多线程并发 TCPServer Demo

    #coding=utf-8 import socket import threading,getopt,sys,string opts, args = getopt.getopt(sys.argv[1 ...

  9. NumPy基础知识：数组和矢量计算

    NumPy 的ndarray:一种多维数组对象 该对象是一个快速且灵活的大数据容器,可以利用这种数组对整个数据进行科学计算,语法跟标量元素之间的计算一样. 创建ndarray的方法: array函数: ...

  10. python中的标识符长度能有多长

    在python中,标识符可以还是任意长度.此外,我们在命名标识符时还必须遵守以下规则 1 只能以下划线或者A-Z/a-z中字母开头 2 其余部分可以使用A-Z/a-z/0-9 3 区分大小写 4 关键 ...