Hiện/Ẩn nhiều DIV với Chọn sử dụng jQuery

Question

tôi về cơ bản có hoàn cảnh tương tự như người trong những câu dưới đây:

Link: how to show/hide divs by select.(jquery)

Qua tìm kiếm rộng rãi trong Google I đã có thể đưa ra một vài các phương thức khác nhau mà mọi người tuyên bố phương thức của họ hoạt động. Tôi chưa nhận được bất kỳ hoạt động chính xác nào. Tôi chưa biết đủ về jQuery để hiểu đầy đủ cách viết từ đầu, vì vậy tôi dựa vào các ví dụ thực sự tốt cho bây giờ.

Những gì tôi đã cố gắng để làm việc với (dựa trên ví dụ tôi đã tìm thấy và cố gắng) là thế này:

<script type="text/javascript"> 
    (document).ready(function() { 
     ('.box').hide();<br/> 
     ('#dropdown').change(function() { 
     ('#divarea1')[ ($(this).val() == 'area1') ? 'hide' : 'show' ]() 
     ('#divarea2')[ ($(this).val() == 'area2') ? 'hide' : 'show' ]() 
     ('#divarea3')[ ($(this).val() == 'area3') ? 'hide' : 'show' ]() 
     }); 
    }); 
</script> 
<form> 
    <select id="dropdown" name="dropdown"> 
     <option value="0">Choose</option> 
     <option value="area1">DIV Area 1</option> 
     <option value="area2">DIV Area 2</option> 
     <option value="area3">DIV Area 3</option> 
    </select> 
</form> 
<div id="divarea1" class="box">DIV Area 1</div> 
<div id="divarea2" class="box">DIV Area 2</div> 
<div id="divarea3" class="box">DIV Area 3</div> 

• Lưu ý: Tôi đang sử dụng dấu ngoặc chứ không phải hơn ít hơn và lớn hơn -than ký xung quanh html để hiển thị chính xác trong thông báo này.

Những gì tôi nhận được khi tôi thử nghiệm này:

• On tải đầu tiên khi không chọn gì => Không DIV là hiển thị.
• Khi tôi chọn DIV Area 1 => DIV Area 2 and 3 được hiển thị.
• Khi tôi chọn DIV Area 2 => DIV Area 1 and 3 được hiển thị.
• Khi tôi chọn DIV Area 3 => DIV Area 1 and 2 được hiển thị.

Não của tôi được chiên trong ngày. Tôi có thể làm gì để sữa nó?

Answer 1

Swap show/hide để nó trông như thế này:

$('#divarea1')[ ($(this).val() == 'area1') ? 'show' : 'hide' ]() 

Answer 2

Mã này là gọn gàng hơn một chút:

$(document).ready 
(
    function() 
    { 
    $("div.box").hide(); 
    $("#dropdown").change 
    (
     function() 
     { 
     var selectedValue = $(this).val(); 
     if(selectedValue !== "0") 
     { 
      $("div.box").show(); 
      $("#div" + selectedValue).hide(); 
     } 
     } 
    ); 
    } 
}; 

Về cơ bản, nếu có một giá trị được lựa chọn (ví dụ, tùy chọn không được đặt thành "Chọn"), sau đó tất cả các phần tử div.box được hiển thị. Sau đó, DIV khớp với tùy chọn đã chọn sẽ ẩn. Điều này sẽ xảy ra đủ nhanh để đèn flash không đáng chú ý.

Answer 3

Tôi muốn làm điều này:

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.box').hide(); 
    $('#dropdown').change(function() { 
    $('.box').hide(); 
    $('#div' + $(this).val()).show(); 
}); 
}); 
</script> 
<form> 
<select id="dropdown" name="dropdown"> 
    <option value="0">Choose</option> 
    <option value="area1">DIV Area 1</option> 
    <option value="area2">DIV Area 2</option> 
    <option value="area3">DIV Area 3</option> 
</select> 
</form> 
<div id="divarea1" class="box">DIV Area 1</div> 
<div id="divarea2" class="box">DIV Area 2</div> 
<div id="divarea3" class="box">DIV Area 3</div> 

Answer 4

@fudgey đã đưa ra một giải pháp tốt đẹp. nhưng có chút nghi ngờ. Nó sẽ tùy thuộc vào giá trị và cần thay đổi ID thuộc tính của<div> mỗi lần.

Vì vậy, tôi muốn làm điều này '

$(document).ready(function() { 
     $('.box').hide(); 
     $('#dropdown').change(function() {  
      var selectedIdx = (0 == $(this).attr("selectedIndex"))? '' :     $(this).attr("selectedIndex"); 
      if("" != selectedIdx){ 
       $('#divarea'+ selectedIdx).hide().siblings().show(); 
      } else { 
       $('.box').hide(); 
      }   
     }); 
    }); 
</script> 
<form> 
    <select id="dropdown" name="dropdown"> 
     <option value="0">Choose</option> 
     <option value="area1">DIV Area 1</option> 
     <option value="area2">DIV Area 2</option> 
     <option value="area3">DIV Area 3</option> 
    </select> 
</form> 
<div id="divarea1" class="box">DIV Area 1</div> 
<div id="divarea2" class="box">DIV Area 2</div> 
<div id="divarea3" class="box">DIV Area 3</div> 
</html>`