JQuery показать / скрыть элементы по полю выбора - PullRequest
Новая
       15

JQuery показать / скрыть элементы по полю выбора

0 голосов
/ 29 сентября 2010

У меня есть поле выбора, которое показывает различные элементы моей формы в зависимости от выбранного значения, у меня есть три «класса», каждый из которых показывает требуемые части поля.В настоящее время у меня есть select, привязанный к .click (), и он работает нормально, за исключением того, что если я хочу загрузить страницу с предварительно выбранным значением, он не будет отображать необходимые части формы, потому что поле select на самом деле не былощелкнул.

Я посмотрел вокруг и не вижу события, которое позволило бы мне показать информацию, основанную на выбранном значении, но я не эксперт, поэтому, возможно, я просто неправильно понимаю некоторые изфункции.

Вот соответствующая часть моего HTML: 

 <select name="class">
    <option value="vehicle" selected="selected">vehicle</option>
    <option value="part">Part</option>
    <option value="project">Project</option>
    <option value="vehicle">Vehicle</option>
 </select><br />
<etc...>

И мой текущий переключатель jQuery: 

   $("select option[value='project']").click(function() {
      $('div.part-show').show().hide();
      $('div.both-show').hide().show();
      $('div.vehicle-show').hide().show();
   });

Большое спасибо!

Ответы [ 2 ]

1 голос
/ 30 сентября 2010

У меня была похожая проблема, и я попытался заставить ее работать: я включил событие щелчка (или событие выбора в моем случае) для объекта, который я хотел предварительно выбрать.

Итак ... в вашем коде jQuery сделайте следующее после настройки функции изменения: 

$('select option:first').click();

Это должно запустить ваше событие и немедленно скрыть / показать все.

Другой вариант, который работает хорошо, - это начать с определенного HTML-кода, показанного и скрытого в зависимости от того, какое значение выбрано по умолчанию (просто кодируйте его в HTML). Это работает, если вы собираетесь использовать статическое значение по умолчанию (AKA, оно не является динамическим в зависимости от ввода другого пользователя).

1 голос
/ 30 сентября 2010

Вы должны использовать событие change () для тега select. 

$("select").change(function() {
  if ($("select").val() == "project") {
    $('div.part-show').show().hide();
    $('div.both-show').hide().show();
    $('div.vehicle-show').hide().show();
  }
});
...