Скрыть/Показать таблицы после выбора разных опций

У меня есть 2 таблицы «iu» и «si», и я разместил раскрывающийся список для пользователей, чтобы выбрать, какой из них они хотят видеть. После выбора опции появится соответствующая таблица.Скрыть/Показать таблицы после выбора разных опций

Другой должен быть скрыт, но когда страница загружена, отображается таблица «si» по умолчанию.

Вот мой код JavaScript:

<script> 
    $(document).ready(function() 
    { 
     $('#iu_table').hide(); 
    }); 
    $('#iu').onchange=function() 
    { 
     $('#si_table').hide(); 
     $('#iu_table').toggle(); 
    } 
</script>

И HTML код:

<select> 
     <option id="si" selected>SI</option> 
     <option id="iu">IU</option> 
    </select>

В таблице ИД "si_table" и "ui_table" соответственно.

Я использовал код выше, но он не работает. Независимо от того, какой я выбираю, отображается только таблица «si».

Я надеюсь, что кто-то может помочь.

источник

2013-07-08 Hongxuan

Ссылка на эту ссылку может помочь вам http://stackoverflow.com/questions/1240205/how-to-hide-show-select-boxes-depending-on-other-choosed-select-box- опция – Bharu

Вы должны, вероятно, работать с Tutorials из JQuery и familarize себя с работой библиотек.

Есть несколько ошибок в коде:

Там нет поля OnChange. Вы хотите изменить функцию jQuery, которая описана здесь: http://api.jquery.com/change/
Код для функции изменения относится к функции $ (document) .ready, поэтому jquery выполняет ее, когда документ загружен. Код должен быть выполнен там, так что функция вызывается при изменении выбора.
Вы хотите работать с изменением выбора не с заменой опции.
В теле вашей функции изменения вы спрячете одну таблицу и переключите другую: переключите оба, поэтому первое может быть показано также, когда выбрана опция. Также эта конструкция работает только для 2 вариантов. Если вам нужно больше вариантов, вам нужно что-то сделать, как в ответе Paritosh.

Вот рабочий пример:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script> 
    $(document).ready(function() 
    { 
     $('#iu_table').hide(); 
     $('#selector').change(function() 
      { 
       $('#si_table').toggle(); 
       $('#iu_table').toggle(); 
      }); 
    }); 

</script> 
</head> 
<body> 
<div id="si_table">si</div> 
<div id="iu_table">iu</div> 
<select id="selector"> 
     <option id="si" selected="selected">SI</option> 
     <option id="iu">IU</option> 
</select> 
</body>

источник

2013-07-08 06:53:32 Silahe

Спасибо большое! Я новичок в javascript .. это мой первый раз, используя js .. Я буду следить за учебниками jquery и исследовать больше в будущем. Спасибо за вашу критику и решение. LOL .. =) – Hongxuan

Но этот способ кажется неэффективным, если есть 3 или более таблиц ... – Hongxuan

, как я уже говорил в последнем пункте. – Silahe

Существует множество способов достижения этого. Одна из них ниже, - добавил я id атрибута выпадающего Control

<select id="myselection"> 
    <option id="si" selected>SI</option> 
    <option id="iu">IU</option> 
</select> 

<script> 
$('#myselection').bind('change', function(){ 
    if($('#myselection option:selected').attr('id') == "si"){ 
     $('#si_table').show(); 
     $('#iu_table').hide(); 
    } 
    else if($('#myselection option:selected').attr('id') == "iu"){ 
     $('#si_table').hide(); 
     $('#iu_table').show(); 
    } 
}); 
</script>

источник

2013-07-08 06:31:27 Paritosh

Существует способ в JQuery, который делает скрыть/показать соответствующие элементы называются toggle() Как вам необходимо скрыть таблицу IU в первой, возможно, потребуется некоторое css трюк для этого. Поэтому поставьте display:none; для таблицы IU и переключитесь на изменение выпадающих значений. Рабочий скрипт: here

источник

2013-07-08 07:13:00

Скрыть/Показать таблицы после выбора разных опций

ответ

Смежные вопросы