javascript - 当选择A改变时改变选择B的div

Question

我有一系列选择，并且想要在第一个选择标签选择了一个选项时更改第二个选择标签上的类。 (我正在使用语义 UI。)

HTML:

<select id="grade" name="grade" class="ui dropdown">
  <option value="">Grade</option>
  <option value="kinder">Kindergarten</option>
  <option value="g1">Grade 1</option>
  <option value="g2">Grade 2</option>
  <option value="g3">Grade 3</option>
  <option value="g4">Grade 4</option>
  <option value="g5">Grade 5</option>
  <option value="g6">Grade 6</option>
  <option value="g7">Grade 7</option>
  <option value="g8">Grade 8</option>
  <option value="g9">Grade 9</option>
  <option value="g10">Grade 10</option>
  <option value="g11">Grade 11</option>
  <option value="g12">Grade 12</option>
</select>

<select id="subject" name="subject" class="ui disabled dropdown">
  <option value="">Subject</option>
  <option value="kinder-esl" class="kinder">ESL</option>
  <option value="kinder-la" class="kinder">LA</option>
  <option value="kinder-health" class="kinder">Health</option>
  <option value="kinder-ict" class="kinder">ICT</option>
  <option value="kinder-math" class="kinder">Math</option>
  <option value="kinder-pe" class="kinder">PE</option>
  <option value="kinder-primary-grades" class="kinder">Primary Grades</option>
  <option value="kinder-science" class="kinder">Science</option>
  <option value="kinder-social-studies" class="kinder">Social Studies</option>
</select>

jQuery:

$(document).ready(function(){
  $('#grade').change(function(){
    $('#subject').removeClass('ui disabled dropdown').addClass('ui dropdown');
  });
});

这是我的 fiddle : https://jsfiddle.net/95p2u8er/

从“成绩”选择标签中选择选项时，“主题”选择标签保持禁用状态。如何修改我的 JS 以切换“主题”选择上的类，使其成为“ui dropdown”？

Answer 1

您的 fiddle 没有包含对 JQuery 的引用。

但是，您还必须考虑如果第一个选择选择了一个选项(除成绩之外)，这将激活第二个下拉列表，但随后第一个下拉列表被放回“成绩”，会发生什么情况。这应该重新禁用第二个列表。

$(document).ready(function(){
  $('#grade').change(function(){
    // Depending on whether the first select has a valid value
    // either enable the second list or not. It's important to
    // have the else portion because someone could activate the
    // second list and then change the first list back to "Grade"
    // Also, you don't need to be adding back the "dropdown" class
    // because the elements are always dropdowns. You only need to 
    // worry about the "disabled" class
    if(this.value){
      $('#subject').removeClass('disabled');
    } else {
      $('#subject').addClass('disabled');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">

<select id="grade" name="grade" class="ui dropdown">
  <option value="">Grade</option>
  <option value="kinder">Kindergarten</option>
  <option value="g1">Grade 1</option>
  <option value="g2">Grade 2</option>
  <option value="g3">Grade 3</option>
  <option value="g4">Grade 4</option>
  <option value="g5">Grade 5</option>
  <option value="g6">Grade 6</option>
  <option value="g7">Grade 7</option>
  <option value="g8">Grade 8</option>
  <option value="g9">Grade 9</option>
  <option value="g10">Grade 10</option>
  <option value="g11">Grade 11</option>
  <option value="g12">Grade 12</option>
</select>

<select id="subject" name="subject" class="ui disabled dropdown">
  <option value="">Subject</option>
  <option value="kinder-esl" class="kinder">ESL</option>
  <option value="kinder-la" class="kinder">LA</option>
  <option value="kinder-health" class="kinder">Health</option>
  <option value="kinder-ict" class="kinder">ICT</option>
  <option value="kinder-math" class="kinder">Math</option>
  <option value="kinder-pe" class="kinder">PE</option>
  <option value="kinder-primary-grades" class="kinder">Primary Grades</option>
  <option value="kinder-science" class="kinder">Science</option>
  <option value="kinder-social-studies" class="kinder">Social Studies</option>
</select>

此外，将来，请将您的代码示例发布在 Stack Overflow 中(在新问题工具栏中提供的“代码片段”中)，而不是在第 3 方位置，因为这些链接可能会随着时间的推移而损坏。