如何隱藏/顯示與下拉列表中的面板更改asp與jQuery

Question

我有一個下拉列表和5面板 我希望當下拉列表更改只有一個面板顯示 面板添加CSS代碼（顯示：無;） 現在如果dropdownlist被更改：下拉列表的值與一個值比較，然後一個面板顯示和其他面板隱藏。

我的代碼是：

$(document).ready(function() { 
    $('#DropDownList1_collection').change(function() { 
     if ($("#DropDownList1_collection").val() === "abcdef") 
      $('#Panel1_LavazemElectroniki').show(); 
    }); 
}); 

Answer 1

您可以添加相同條件的任何其他條件配合。

$('#DropDownList1_collection').change(function() { 
    if ($("#DropDownList1_collection").val() === "abcdef"){ 
     $('#Panel1_LavazemElectroniki').show(); 
     $('#Panel2_LavazemElectroniki').hide(); 
     $('#Panel3_LavazemElectroniki').hide(); 
     $('#Panel4_LavazemElectroniki').hide(); 
     $('#Panel5_LavazemElectroniki').hide(); 
    } 
}); 

Answer 2

你可以做這樣的事情

$('div[class^="drop-"]').hide(); 
 

 
$('select').change(function() { 
 
    a = $(this).val(); 
 
    $('div[class^="drop-"]').hide(); 
 
    $('.drop-' + a).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
</select> 
 
<div class="drop-1">dropdown 1</div> 
 
<div class="drop-2">dropdown 2</div> 
 
<div class="drop-3">dropdown 3</div>