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');
  });
});

这是我的小提琴： https://jsfiddle.net/95p2u8er/

从“成绩”选择标记中选择一个选项时，“主题”选择标记将保持禁用状态。如何修改我的JS以在“主题”选择上切换课程，以便它是“ ui dropdown ”？

Answer 1

你的小提琴并没有包含对JQuery的引用。

但是，你还必须考虑如果第一个选择选择了（选择除了等级）之后会发生什么，这将激活第二个下拉，然后第一个下拉回到等级。这应该重新禁用第二个列表。

＆＃13;

$(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');
    }
  });
});

＆＃13;

<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>

＆＃13;

此外，将来，请在Stack Overflow中发布您的代码示例（在＃34;代码段＆＃34;可从新问题工具栏中找到）而不是在第三方位置，因为这些链接可能会变为随着时间的推移而破碎。

Answer 2

你的JS按照书面编写，但你必须在小提琴中启用jQuery。单击JS面板中的齿轮图标，然后选择jQuery的风格以使其工作。

那就是说，为什么要删除所有类只是为了添加两个类。你可以简单地执行以下操作：

$('#subject').removeClass('disabled');

这将删除指定的类并保留其他类

Answer 3

使用.toggleClass()功能。

$('#grade').on("change", function(){
    $('#subject').toggleClass('disabled', $(this).val() === '');
 });

另外，你的jsfiddle没有启用jQuery，也许这就是为什么？

Answer 4

我刚刚更新了你的小提琴，包括jquery，这很有效。

$(document).ready(function(){
alert("ready called");
  $('#grade').change(function(){
    alert("click called");
    $('#subject').removeClass('disabled');
  });
});

当选择A更改

4 个答案: