首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

帮个小伙伴凑了个页面,关于js操作 select 和隐藏div的

2012-10-28 
帮个小朋友凑了个页面,关于js操作 select 和隐藏div的有个小朋友不会写js ,我只是在刚参加工作的时候写过

帮个小朋友凑了个页面,关于js操作 select 和隐藏div的
有个小朋友不会写js ,我只是在刚参加工作的时候写过一段时间,按照她的需求,从网上找了找,改了改,就成了下面的了,能运行的。


<!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>javascript获取下拉列表的值</title>     <script type="text/javascript">   function showValue(){       var cityid = document.getElementById("city").value;    alert(cityid);  changeBody(cityid); return cityid;}   function showText(){ var cityText = document.getElementById("city"); alert(cityText); for(i= 0 ;i<cityText.length;i++){  if(cityText[i].selected == true){   alert(cityText[i].innerText);//这个在火狐浏览器中不支持  } } }function gather(){ var pjValue = document.getElementById("pj").value; var gatherValue = showValue() + " +  "+ pjValue alert("----------"+gatherValue)}function changeBody(index){alert(index);  switch(index){    case "1":{      document.getElementById('div1').style.display = "";      document.getElementById('div2').style.display = "none";      document.getElementById('div3').style.display = "none";      break;    }    case "2":{      document.getElementById('div1').style.display = "none";      document.getElementById('div2').style.display = "";      document.getElementById('div3').style.display = "none";      break;    }    case "3":{      document.getElementById('div1').style.display = "none";      document.getElementById('div2').style.display = "none";      document.getElementById('div3').style.display = "";      break;     }   default:{      document.getElementById('div1').style.display = "";      document.getElementById('div2').style.display = "";      document.getElementById('div3').style.display = "";      break;}  }} </script>     </head>     <body style="text-align:center">   <p>JavaScript获取下拉列表的值</p>   <p>     <select id="city" >       <option value="1">北京</option>       <option value="2">上海</option>       <option value="3">广州</option>       <option value="4">深圳</option>       <option value="5">重庆</option>       <option value="6">南京</option>       <option value="7">杭州</option>     </select>   </p>文本:<input type="text" id="pj" value=""/><br><div style="display :none" id="div1"> hello this is div1</div><div style="display :none" id="div2">hello this is div2</div><div style="display :none" id="div3">hello this is div3</div><br><input type="button" value="看看选的value" onclick="showValue()" ></button><input type="button" value="看看选的Text" onclick="showText()"/><br><input type="button" value="拼凑url" onclick="gather()"/><p>   <div id="showChoise" ></div>   </p>   </body>   </html> 
function showText(){ var cityText = document.getElementById("city"); alert(cityText[cityText.selectedIndex].innerText); }

热点排行
Bad Request.