码迷,mamicode.com
首页 > Web开发 > 详细

js实现点击下拉框选中对应的div

时间:2017-09-01 11:20:27      阅读:498      评论:0      收藏:0      [点我收藏+]

标签:options   one   自己   value   cti   快速   包括   时间   length   

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>js实现点击下拉框选中对应的div</title>
            <style type="text/css">
div{display:none;}
</style>
      </head>
      <body>
<select name="select1" id="select1">
      <option name="option1" id="option1" value="value1">11111111</option>
      <option name="option2" id="option2" value="value2">22222222</option>
      <option name="option3" id="option3" value="value3">33333333</option>
      <option name="option4" id="option4" value="value4">44444444</option>
      <option name="option5" id="option5" value="value5">5555555</option>
</select>
      <div id="div1">我以为哪位好心的弟兄姐妹来劝我悔改,不要在反对基督教的路上越走越远。谁知是陌生人 群发的电邮,看完内容后,我大惊失色。</div>
      <div id="div2">结尾段,给出了联络方式。我统计了一下,包括遍布南京的十所高校的联系方式,范围之广令人吃惊。(其中还包括了有军工背景的高校:南京理工大学,南京航空航天大学。)</div>
      <div id="div3">端的技术日渐更新,最近得空,花了一上午的时间,将前端常见的UI框架总结了一下,在开发的过程之中,有了这些,不断能够提高自己的工作效率,还可以在工作之余了解更多。希望大家喜欢</div>
      <div id="div4">ayui是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用</div>
      <div id="div5">从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发。,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发。</div>
      
</body>
<script>
      
      var select = document.getElementById("select1");
    select.onchange = function(){
            var options = select.getElementsByTagName("option");
            for(var i = 0; i < options.length; i++){
                  if(options[i].selected){
                        var divid = options[i].id.replace("option","div");
                        var divs = document.getElementsByTagName("div");
                        for(var j = 0; j < divs.length; j++){
                              if(divid == divs[j].id){
                                    divs[j].style.display = "block";
                              }else{
                                    divs[j].style.display = "none";
                              }
                        }
                  }
        }
    }
      
</script>
</html>

js实现点击下拉框选中对应的div

标签:options   one   自己   value   cti   快速   包括   时间   length   

原文地址:http://www.cnblogs.com/Yoko-815/p/7462251.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!