jQuery: show () и hide () по порядку?

Question

У меня есть область, где фрагмент HTML (показанный ниже) добавляется динамически столько раз, сколько пользователь пожелает. Не беспокойтесь там. Проблема в том, что в этом HTML-блоке есть поле выбора, а затем div, который по умолчанию скрыт, но должен отображаться, если в меню выбора выбран вариант «выпадающий».

<div>
    <select name="" class="select_change">
      <option value="">--Select One--</option>
      <option value="textarea">Text Area</option>
      <option value="textbox">Text Box</option>
      <option value="checkbox">Check Box</option>
      <option value="dropdown">Drop Down</option>
    </select>
</div>
<div class="dropdown_fields hidden">
  <label>Options</label>
  <p><textarea name="" rows="8" cols="40"></textarea></p>
  <p class="field_desc">Please enter the values that should display in the Drop Down, one per line.</p>
</div>

Итак, проблема в том, что я вижу / скрываю этот div, когда есть несколько одинаковых блоков HTML.

Что я предполагаю, так это то, что мне нужно сказать, что div сразу после вызванного меню выбора является единственным, к которому нужно применить действие ... но я не уверен, как это сделать.

Answer 1

Предполагая, что переключаемый div следует за родителем select (как показано в вашем примере):

$(".select_change").live("change", function(){
  $(this).val() === "dropdown" 
    ? $(this).parent().next().show() 
    : $(this).parent().next().hide();
  }
});

Answer 2

Вы можете сделать что-то вроде этого:

$('select.select_change').change(function(e){
    $(this).parent('div').next('div.dropdown_fields').removeClass('hidden');
});

Answer 3

Измените выбранный открывающий тег на следующее:

<select name="" class="select_change" onchange="if ($(this).val() == 'dropdown') { $(this).closest('div').next('div').removeClass('hidden'); } else { $(this).closest('div').next('div').addClass('hidden'); }">