顯示/隱藏（切換）使用JavaScript

我有一個下拉菜單，兩個div網頁基於選擇的div顯示：顯示/隱藏（切換）使用JavaScript

<html> 
<head> 
<title>Show/Hide a div section based on selection</title> 
</head> 
<body> 
    <select id='sel'> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    </select> 

    <div id="firstdiv"> 
    <label><input type="checkbox" id='1' />A</label> 
    <label><input type="checkbox" id='2' />B</label> 
    <label><input type="checkbox" id='3' />C</label> 
    </div> 

    <div id="seconddiv"> 
    <label><input type="checkbox" id='4' />D</label> 
    <label><input type="checkbox" id='5' />E</label> 
    <label><input type="checkbox" id='6' />F</label> 
    </div> 
</body> 
</html>

我如何可以切換上面顯示兩個div基於使用JavaScript或jQuery的選擇？即當我選擇選項1時，應該顯示第一個div，之後應該隱藏，反之亦然。

來源

2013-10-21 mpsbhat

可能重複[顯示div取決於選擇選項]（http://stackoverflow.com/questions/1691170/show-div-depending-on-select-option） – Shadow

我現在編輯了問題。請檢查並移除@James Donnelly – mpsbhat

demo

HTML

<select id="selectMe"> 
    <option value="div1">div1</option> 
    <option value="div2">div2</option> 
</select> 
<br><br><br> 

<div id="div1" class="group" > 
    <label><input type="checkbox" id='1' />A</label> 
<label><input type="checkbox" id='2' />B</label> 
<label><input type="checkbox" id='3' />C</label> 
</div> 

<div id="div2" class="group" > 
    <label><input type="checkbox" id='4' />D</label> 
<label><input type="checkbox" id='5' />E</label> 
<label><input type="checkbox" id='6' />F</label> 
</div>

JS：

$(document).ready(function() { 
    $('.group').hide(); 
    $('#div1').show(); 
    $('#selectMe').change(function() { 
     $('.group').hide(); 
     $('#'+$(this).val()).show(); 
    }) 
});

來源

2013-10-21 10:26:50 Ashish

試試這個。這將幫助你

$('#sel').change(function(){ 
    if($(this).val()==1){ 
      $('#firstdiv').show(); 
      $('#seconddiv').hide(); 
    } 
    else{ 
      $('#seconddiv').show(); 
      $('#firstdiv').hide(); 
    }  
});

演示Here

來源

2013-10-21 10:22:54

，你可以嘗試像這樣的：

  <script> 
       function test1(){ 

       var elem = document.getElementById("test").value; 
       document.getElementById("firstdiv").style.display = (elem == "1") ? "block" : "none"; 
       document.getElementById("seconddiv").style.display = (elem == "2") ? "block" : "none"; 
      } 
      </script> 

      <select id="test" onchange="test1();"> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      </select> 

      <div id="firstdiv" style="display:none"> 
      <label><input type="checkbox" id='1' />A</label> 
      <label><input type="checkbox" id='2' />B</label> 
      <label><input type="checkbox" id='3' />C</label> 
      </div> 

      <div id="seconddiv" style="display:none"> 
      <label><input type="checkbox" id='4' />D</label> 
      <label><input type="checkbox" id='5' />E</label> 
      <label><input type="checkbox" id='6' />F</label> 
      </div>

來源

2013-10-21 10:34:31 shemy

對於你的情況，你可以使用：

<!doctype html> 
<html> 

    <head> 

     <title>Hide elements on select change</title> 

    </head> 

    <body> 

     <select id="sel"> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
     </select> 

     <div id="firstdiv"> 
      <label><input type="checkbox" id='1' />A</label> 
      <label><input type="checkbox" id='2' />B</label> 
      <label><input type="checkbox" id='3' />C</label> 
     </div> 

     <div id="seconddiv"> 
      <label><input type="checkbox" id='4' />D</label> 
      <label><input type="checkbox" id='5' />E</label> 
      <label><input type="checkbox" id='6' />F</label> 
     </div> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $('#sel').on('change', function() { 
       var baseVal = $(this).val(); 
       switch (baseVal) { 
        case '1' : 
         $('#seconddiv').hide(); 
         $('#firstdiv').show(); 
         break; 
        case '2' : 
         $('#firstdiv').hide(); 
         $('#seconddiv').show(); 
         break; 
        default: 
         break; 
       }; 
      }); 
      $('#sel').trigger('change'); 
     </script> 

    </body> 

</html>

..但也有輸出HTML更好的方法，因此您可以通過腳本輕鬆訪問內容。

來源

2013-10-21 10:37:53 skobaljic

顯示/隱藏（切換）使用JavaScript

回答

相關問題