Question

这是选项（option1和option2）。如果选择了option1，则应显示<div id="aa">和<div id="bb">，并且在选择option2时，应显示<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>

Answer 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>

Answer 2

尝试使用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>

Answer 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>

Answer 4

没有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>

Answer 5

您可以将 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(); } })

Answer 6

使用id作为选择标记

   $(document).ready(function(){

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

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

显示隐藏div元素onselect选项

6 个答案: