JavaScript -- Input Select 操作, 级联菜单

来源：互联网发布：网络企鹅使用方法编辑：程序博客网时间：2024/05/21 10:04

<!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>