如何使用 jQuery 在 ASP 中隐藏/显示带有下拉列表更改的面板

how to hide/show the panels with drop down list change in asp with jQuery

本文关键字：下拉列表 显示 jQuery 何使用 ASP 隐藏      更新时间：2023-09-26

我有一个下拉列表和 5 个面板我希望当下拉列表更改时只显示一个面板显示对于面板，添加CSS代码（显示：无;）现在，如果下拉列表被更改：下拉列表的值与一个值进行比较，则一个面板显示，其他面板隐藏。

我的代码是：

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

您可以为要匹配的任何其他条件添加相同的条件。

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

你可以做这样的事情

$('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>

相关文章：