jQuery选择下拉列表以添加或删除类

Question

我正在构建一个Web应用程序，您可以在其中将电视节目标记为“想要观看”，“当前观看”，“结束观看”或“停止观看”。 有一个下拉菜单供您选择。 如果选择了“当前观看”，则还应该显示两个下拉菜单，以便用户输入他们最近观看的季节和情节。 但是，我无法使jQuery正常工作

HTML

<select name="updateTvStatus" class="form-control" id="updateTvStatus">
    <option value="4" selected>Want to Watch</option>
    <option value="1">Currently Watching</option>
    <option value="2">Finished Watching</option>
    <option value="3">Stopped Watching</option>
</select>
<div id="last-watched" class="hidden">
    <select name="updateLastSeason" class="form-control" id="updateLastSeason">
        <option value="0">Select Season:</option>
        <option value="1">Season 1</option>
        <option value="2">...</option>
    </select>
    <select name="updateLastEpisode" class="form-control" id="updateLastEpisode">
        <option value="0">Select Episode:</option>
        <option value="1">Episode 1</option>
        <option value="2">...</option>
    </select>
</div> <!-- /last-watched -->

jQuery的

$(document).ready(function() {    
    $("#updateTvStatus").change(function() {
        var TVstatus = $("#updateTvStatus").val();
        var ishidden = $('#last-watched').hasClass("hidden");
        if (TVstatus == 1 && ishidden == TRUE) {
            $('#last-watched').removeClass("hidden");
        } elseif (TVstatus != 1 && ishidden == FALSE) {
            $('#last-watched').addClass("hidden");
        }
    });
});

Answer 1

1. 否则if（elseif）-语法错误。
2. 由于JS区分大小写，因此您必须将TRUE / FALSE更改为true / false。
3. 您指定了类选择器，而不是ID选择器。 请将$（'。last-watched'）更改为$（'＃last-watched'）。

（您可以使用===代替==进行严格比较）。 因此，一个完整的代码将像这样工作：

    $(document).ready(function() {    
      $("#updateTvStatus").change(function() {
        var TVstatus = $("#updateTvStatus").val();
        var ishidden = $('#last-watched').hasClass("hidden");
        if (TVstatus == 1 && ishidden == true) {
           $('#last-watched').removeClass("hidden");
        } else if (TVstatus != 1 && ishidden == false) {
           $('#last-watched').addClass("hidden");
       }
      });
    });

Answer 2

我不知道你到底在找什么。 但这就是您想要的：

$(document).ready(function() {    
$('#last-watched').hide();
$("#updateTvStatus").change(function() {
 var TVstatus = $("#updateTvStatus").val();
   if(TVstatus == 1){
        $('#last-watched').show();
    }else {
        $('#last-watched').hide();
    }
});
});
</script>