显示隐藏 div 元素 onselect 选项 [关闭]答案

【问题标题】：Show hide div element onselect option [closed]显示隐藏 div 元素 onselect 选项 [关闭]
【发布时间】：2013-12-14 09:33:41
【问题描述】：

这里是选项（选项 1 和选项 2）。如果选择选项 1，则应显示 <div id="aa"> 和 <div id="bb">，选择选项 2 时，应显示 <div id="bb"> 和 <div id="cc">。如何使用javascript来做到这一点？

<select>
<option>option1</option>
<option>option2</option>
</select>

<div id="aa">
<table width="100%" border="0" style="text-align:center;">
<tr><td>Table 1</td></tr>
</table></div>

<div id="bb">
<table width="100%" border="0" style="text-align:center;">
<tr><td>Table 2</td></tr>
</table></div>


<div id="cc">
<table width="100%" border="0" style="text-align:center;">
<tr><td>Table 3</td></tr>
</table></div>

【问题讨论】：

再次。这不是一个人愿意为您的网站编码。自己学习 JAVASCRIPT。
我在options中使用了上述内容

标签： javascript html show-hide

【解决方案1】：

首先在onChange事件上调用一个函数

 <select onchange="ShowDiv(this.value)"> 
       <option value="1">option1</option>
       <option value="2">option2</option>
 </select>

然后在Javascript中

 <script type="textt/javascript">
      function ShowDiv(val)
      {
           switch(val)
           {
                case 1:
                {
                     document.getElementbyId('aa').style.display = "block";
                     document.getElementbyId('bb').style.display = "block";
                     document.getElementbyId('cc').style.display = "none";
                     break;
                }
                case 2:
                {
                     document.getElementbyId('bb').style.display = "block";
                     document.getElementbyId('cc').style.display = "block";
                     document.getElementbyId('aa').style.display = "none";
                     break;
                }
           }
      }
 </script>

【讨论】：

【解决方案2】：

使用 id 作为选择标签

$(document).ready(function(){

     $('#select').change(function(){

     if($(this).val()=="option1") {
        $("#aa").show();
        $("#cc").hide();
     }
     else {
        $("#aa").hide();
        $("#cc").show();
     }

  });

});

【讨论】：

【解决方案3】：

$(document).ready(function(){

$("select").change(function(){

if($(this).text()=="option1")
{
  $("#aa").show();
 $("#cc").hide();
}
else
{
 $("#aa").hide();
 $("#cc").show();
}
});

})

<select>
<option>option1</option>
<option>option2</option>
</select>

<div id="aa">
<table width="100%" border="0" style="text-align:center;">
<tr><td>Table 1</td></tr>
</table></div>

<div id="bb">
<table width="100%" border="0" style="text-align:center;">
<tr><td>Table 2</td></tr>
</table></div>


<div id="cc" style="display:none;">
<table width="100%" border="0" style="text-align:center;">
<tr><td>Table 3</td></tr>
</table></div>

【讨论】：

【解决方案4】：

使用 javascript 试试这个：

<select onchange="sample(this.value);">
<option value="op1">option1</option>
<option value="op2">option2</option>
</select>

<div id="aa">
<table width="100%" border="0" style="text-align:center; display:none;">
<tr><td>Table 1</td></tr>
</table></div>

<div id="bb">
<table width="100%" border="0" style="text-align:center; display:none;">
<tr><td>Table 2</td></tr>
</table></div>


<div id="cc">
<table width="100%" border="0" style="text-align:center; displaty:none;">
<tr><td>Table 3</td></tr>
</table></div>

<script>
function sample(value)
{
  if(value=="op1")
{

       document.getElementById('cc').style.display = 'none';
       document.getElementById('aa').style.display = 'block';
       document.getElementById('bb').style.display = 'block';

}
else
{  
       document.getElementById('aa').style.display = 'none';
       document.getElementById('bb').style.display = 'block';
       document.getElementById('cc').style.display = 'block';
}
}
</script>

【讨论】：

【解决方案5】：

并且没有 Jquery ...

<!DOCTYPE html >
 <html>
   <head>
     <title> Bla! </title>
     <script type='text/javascript'>
        var m_LastDiv = null;
        function SelectChanged(obj) {
            if (m_LastDiv) {
                m_LastDiv.style.display = 'none';
            }
            m_LastDiv = document.getElementById('div' + obj.value)
            if (m_LastDiv) {
                m_LastDiv.style.display = 'block';
            }
        }
     </script>
   </head>
   <body>
        <select onchange='SelectChanged(this);'>
            <option value=''> Hide </option>
            <option value='1'> Show Option 1 </option>
            <option value='2'> Show Option 2</option>
        </select>
        <div id='div1' style='display:none;'> Data in div 1 </div>
        <div id='div2' style='display:none;'> Data in div 2</div>
   </body>
 </html>

【讨论】：

【解决方案6】：

您可以为此使用 jQuery

1.) 在您的 <head> 中包含 jquery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

那么，

HTML

<select id="selBox">
    <option>Select</option>
    <option value="1">option1</option>
    <option value="2">option2</option>
</select>

<div id="aa" class="hide">
   <table width="100%" border="0" style="text-align:center;">
   <tr><td>Table 1</td></tr>
   </table>
</div>

<div id="bb" class="hide">
    <table width="100%" border="0" style="text-align:center;">
    <tr><td>Table 2</td></tr>
    </table>
</div>


<div id="cc" class="hide">
   <table width="100%" border="0" style="text-align:center;">
   <tr><td>Table 3</td></tr>
   </table>
</div>

CSS

.hide {

    display:none;
}

JQUERY

$("#selBox").on('change', function(){
    var selVal = $(this).val();
    if(selVal==1){
        $("#aa, #bb").show();
        $("#cc").hide();
    }else if(selVal==2){
        $("#bb, #cc").show();
        $("#aa").hide();
    }
})

【讨论】：