Jquery Select 用于添加或删除 class 的下拉菜单

Question

我正在构建一个 Web 应用程序，您可以在其中将电视节目标记为 "Want to Watch"、"Currently Watching"、"Finished Watching" 或 "Stopped Watching." [=29] 有一个下拉菜单=] 在这些之间。如果 "Currently Watching" 是 selected，还应该显示另外两个下拉菜单，以便用户输入他们上次观看的季和剧集。但是，我无法让 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

else if (elseif) - 语法错误。
由于 JS 区分大小写，您需要将 TRUE/FALSE 更改为 true/false。
您指定了 class 选择器而不是 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>

Jquery Select 用于添加或删除 class 的下拉菜单

Jquery Select Dropdown to add or remove a class

html

javascript

jquery

html-select