帮个小朋友凑了个页面,关于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); }