帮个小伙伴凑了个页面，关于js操作 select 和隐藏div的-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20442 次

帮个小朋友凑了个页面，关于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>

1 楼 jl580650 2010-09-20

对于select的操作，建议还是通过option
http://304288612.iteye.com/blog/297893
看看这个就可以了

2 楼 serryzhao 2010-09-20

jl580650 写道

对于select的操作，建议还是通过option
http://304288612.iteye.com/blog/297893
看看这个就可以了

不错，受教。谢谢

3 楼 serryzhao 2010-09-20

jl580650 写道

对于select的操作，建议还是通过option
http://304288612.iteye.com/blog/297893
看看这个就可以了

刚才闲着没事按照你的方法重

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>