показать / скрыть несколько вариантов в JQuery

Question

показать / скрыть несколько вариантов в JQuery

0

Мне нужно показать/скрыть более 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"});
        }
    });
});

user1801605 12 май 2014, в 20:14

Источник

0

опубликовать свой HTML тоже
Ejaz 12 май 2014, в 18:01
0

использовать классы: 1 / скрыть все 2 / показать только необходимые; Это просто примеры или вы действительно можете сопоставить имя с выбранным значением?
nicolallias 12 май 2014, в 18:03

Теги:

javascript

jquery

3 ответа

1

Если у всех есть класс, называемый 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});
    });
});

johankj 12 май 2014, в 16:39

0

Попробуйте использовать селектор "не" jQuery (если в таблице нет атрибута id "color3"):

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"});
}

alex 12 май 2014, в 15:52

0

К сожалению, первая таблица должна быть открыта при загрузке страницы. Это уже решено, спасибо.
user1801605 12 май 2014, в 18:16

Ещё вопросы

использовать классы: 1 / скрыть все 2 / показать только необходимые; Это просто примеры или вы действительно можете сопоставить имя с выбранным значением?
К сожалению, первая таблица должна быть открыта при загрузке страницы. Это уже решено, спасибо.

Peter van der Wal · Accepted Answer · 2014-05-12T15-11-00.000Z

Дайте всем таблицам класс (например, 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)