javascript - 如何在 jquery 中隐藏（或显示）子下拉列表（动态 html）？

Question

在这里单击 + 按钮添加新行并单击 - 按钮删除行设计时创建一个动态表行，如下所示，

Here subject drop-down display and also instructor drop-down display but the problem is when select subject maths instructor drop-down show and when select a science instructor drop-down hide but it's changing in all drop-down.

$('body').on('change', '.course_topic', function() {
  var topic_name = $(this).val();
  var names = ['Registration', 'Lunch Break', 'Tea Break'];

  if (jQuery.inArray(topic_name, names) != '-1') {
    $(this).closest('table').find('tbody#schedule_table').find('td:last').parent().find('td').hide();
  } else {
    $(this).closest('table').find('tbody#schedule_table').find('td:last').parent('td').find('td').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr>
      <th>From Time</th>
      <th>To Time</th>
      <th>Subject</th>
      <th>Instructor</th>
      <th></th>
    </tr>
  </tbody>
  <tbody id="schedule_table">
    <tr id="ScheduleTable1">
      <td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
      <td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
      <td>
        <select name="data[CourseSchedule] 
               [schedule_subject][]" default="" class="form-control select2me 
               course_topic" id="CourseScheduleScheduleSubject">
          <option value="">Select Subject</option>
          <option value="gfgfg" selected="selected">gfgfg</option>
          <option value="Registration">Registration</option>
          <option value="Lunch Break">Lunch Break</option>
          <option value="Tea Break">Tea Break</option>
        </select>
      </td>
      <td>
        <select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" id="CourseScheduleScheduleInstructor" style="display: none;">
          <option value="">Select Subject</option>
          <option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
        </select>
      </td>
      <td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
    </tr>
    <tr id="ScheduleTable0">
      <td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
      <td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
      <td>
        <select name="data[CourseSchedule] 
               [schedule_subject][]" default="" class="form-control select2me 
               course_topic" id="CourseScheduleScheduleSubject">
          <option value="">Select Subject</option>
          <option value="gfgfg" selected="selected">gfgfg</option>
          <option value="Registration">Registration</option>
          <option value="Lunch Break">Lunch Break</option>
          <option value="Tea Break">Tea Break</option>
        </select>
      </td>
      <td>
        <select name="data[CourseSchedule] 
               [schedule_instructor][]" default="" class="form-control select2me 
               instructor_name" id="CourseScheduleScheduleInstructor" style="display: 
               none;">
          <option value="">Select Subject</option>
          <option value="Chintan Mahant" selected="selected">Chintan Mahant
          </option>
        </select>
      </td>
      <td><input type="button" class="btn btn- 
            primary btn-style" id="AddScheduleRow1" name="Add" value="+">
      </td>
    </tr>
  </tbody>
</table>

标签： javascriptjqueryhtmlcsstoggle

Answer 1

发生这种情况是因为标识符重复，该id属性在同一个文档中必须是唯一的。

这将通过用通用类替换重复的类来解决。

那么您的选择器可能很简单：

$(this).closest('tr').find('.instructor_name');

$('body').on('change', '.course_topic', function() {
  var topic_name = $(this).val();
  var names = ['Registration', 'Lunch Break', 'Tea Break'];
  var instructor_name = $(this).closest('tr').find('.instructor_name');

  if ($.inArray(topic_name, names) != -1) {
    instructor_name.hide();
  } else {
    instructor_name.show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table">
  <tbody>
    <tr>
      <th>From Time</th>
      <th>To Time</th>
      <th>Subject</th>
      <th>Instructor</th>
      <th></th>
    </tr>
  </tbody>
  <tbody id="schedule_table">
    <tr class="ScheduleTable1">
      <td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text"></td>
      <td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
      <td>
        <select name="data[CourseSchedule] 
           [schedule_subject][]" default="" class="form-control select2me 
           course_topic">
          <option value="">Select Subject</option>
          <option value="gfgfg" selected="selected">gfgfg</option>
          <option value="Registration">Registration</option>
          <option value="Lunch Break">Lunch Break</option>
          <option value="Tea Break">Tea Break</option>
        </select>
      </td>
      <td>
        <select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" style="display: none;">
          <option value="">Select Subject</option>
          <option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
        </select>
      </td>
      <td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
    </tr>
    <tr class="ScheduleTable0">
      <td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text"></td>
      <td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
      <td>
        <select name="data[CourseSchedule] 
           [schedule_subject][]" default="" class="form-control select2me 
           course_topic">
          <option value="">Select Subject</option>
          <option value="gfgfg" selected="selected">gfgfg</option>
          <option value="Registration">Registration</option>
          <option value="Lunch Break">Lunch Break</option>
          <option value="Tea Break">Tea Break</option>
        </select>
      </td>
      <td>
        <select name="data[CourseSchedule] 
           [schedule_instructor][]" default="" class="form-control select2me 
           instructor_name" style="display: 
           none;">
          <option value="">Select Subject</option>
          <option value="Chintan Mahant" selected="selected">Chintan Mahant
          </option>
        </select>
      </td>
      <td><input type="button" class="btn btn- 
        primary btn-style" id="AddScheduleRow1" name="Add" value="+">
      </td>
    </tr>
  </tbody>
</table>