Показать опцию скрытия элемента div при выборе

0

Вот варианты (опция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>
  • 2
    Очередной раз. ЭТО НЕ ЛЮДИ БУДЕТ КОДИТЬ ДЛЯ ВАС САЙТА. УЗНАЙТЕ JAVASCRIPT СЕБЯ.
  • 0
    <option onclick = "Show ('aa'); Show ('bb'); Hide ('cc');"> option1 </ option> я использовал вышеупомянутое в настройках)
Теги:
show-hide

6 ответов

1
Лучший ответ

Сначала вызовите функцию on on событие

 <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>
Поделиться
0

Использовать идентификатор для тега select

   $(document).ready(function(){

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

     if($(this).val()=="option1") {
        $("#aa").show();
        $("#cc").hide();
     }
     else {
        $("#aa").hide();
        $("#cc").show();
     }
   });
Поделиться
0

Вы можете использовать jQuery для этого

1.) Включите jquery в свой <head>

<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();
    }
})
Поделиться
0 
$(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>
Поделиться
0

и без 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>
Поделиться
0

Попробуйте это с помощью 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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню