Question

我需要在单个选择下拉列表中显示/隐藏超过100个选项。到目前为止，我的代码如下所示。但是，它似乎适用于少量选项，但不适用于大量选项。还有更好的方法吗？

$(document).ready(function() {
    $("#colors").change(function(){
        var selectedValue = $(this).val();
        url = "http://domain.com";
        if(selectedValue == "color1"){
          $("table#color1").show();
          $("table#color2").hide();
          $("table#color3").hide();
          $.get(url, {name: "color1"});
        }   
        if(selectedValue == "color2"){
          $("table#color1").hide();
          $("table#color2").show();
          $("table#color3").hide();
          $.get(url, {name: "color2"});
        }
        if(selectedValue == "color3"){
          $("table#color1").hide();
          $("table#color2").hide();
          $("table#color3").show();
          $.get(url, {name: "color3"});
        }
    });
});

Answer 1

为所有表格提供一个类（例如class="colored-table"）并执行以下操作：

$('table.colored-table').hide();
$('table#' + selectedValue).show();
// 'table#' + selectedValue : will become 'table#color1' if selectedValue equals 'color1' and so on
$.get(url, {name: selectedValue});

（编辑：忘了$ .get）

Answer 2

如果他们都有一个叫做例如color，您可以执行以下操作：

$(document).ready(function() {
    $("#colors").change(function(){
        var selectedValue = $(this).val();
        url = "http://domain.com";
        $("table.color").hide();
        $("table#"+selectedValue).show();
        $.get(url, {name: selectedValue});
    });
});

Answer 3

尝试使用jQuery＆＃34;而不是＆＃34;选择器，（如果表没有＆＃34; color3＆＃34;）的id属性：

if(selectedValue == "color3"){
    $("table").not('#color3').hide();
    $("table#color3").show();
    $.get(url, {name: "color3"});
}

或者您可以隐藏所有表格，然后只显示您需要的表格：

if(selectedValue == "color3"){
    $("table").hide();
    $("table#color3").show();
    $.get(url, {name: "color3"});
}

在jQuery中显示/隐藏多个选项

3 个答案: