帮个小朋友凑了个页面，关于js操作 select 和隐藏div的-CSDN博客

本文链接：https://blog.csdn.net/larryzhao234/article/details/83711956

有个小朋友不会写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>