在选择框项目中隐藏和显示更改

Question

我有以下内容：

<div class="group">
  <label class="require" for="Roles">Roles</label>
  <select id="Roles" class="roles" name="Roles">
    <option value=""></option>
    <option value="1">Professor</option>
    <option value="2">Student</option>
    <option value="3">Director</option>
  </select>
</div>
<div class="group hide" id="cv">
  // Something
</div>

当我选择教授选项时，我想将“show”类添加到id为“cv”的div中，当选择其中一个选项时，切换回类隐藏。

我该怎么做？我正在使用JQuery。

Answer 1

你可以这样做：

$("#Roles").change(function() {
    if (this.value == "1") {
        $("#cv").addClass("show").removeClass("hide");
    } else {
        $("#cv").removeClass("show").addClass("hide");
    }
});