Javascript 如何使用dropdownlist更改事件在asp.net mvc 5中隐藏和显示div

我正在尝试使用dropdownlist change event在我的mvc 5项目中隐藏和显示div，我已经研究过了，幸运的是我在网上找到了这段代码，但它似乎对我不起作用，如果有人能指出我犯错误的地方，我将不胜感激。 提前谢谢

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(document).ready(function () {
            $("#CountryID").change(function () {
                if ($(this).val() == "Ghana") {
                    $("#showStateLga").show();
                    $("#showStateLgaText").hide();
                } else {
                    $("#showStateLga").hide();
                    $("#showStateLgaText").show();
                } 
            });
        });
    });
</script>

$（函数（）{
$（文档）.ready（函数（）{
$（“#CountryID”）.change（函数（）{
如果（$（this.val（）=“加纳”）{
$（“#showStateLga”）.show（）；
$（“#showStateLgaText”）.hide（）；
}否则{
$（“#showStateLga”）.hide（）；
$（“#showStateLgaText”）.show（）；
} 
});
});
});

下拉列表控件：

<div class="form-group">
                @Html.LabelFor(model => model.CountryID, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownListFor(model => model.CountryID, (IEnumerable<SelectListItem>)ViewBag.cCountryList, "---Select---", new {@class = "form-control" })
                    @Html.ValidationMessageFor(model => model.CountryID, "", new { @class = "text-danger" })
                </div>
            </div>

@LabelFor（model=>model.CountryID，htmlAttributes:new{@class=“controllabel col-md-2”}）
@Html.DropDownListFor（model=>model.CountryID，（IEnumerable）ViewBag.cCountryList，“--Select--”，new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.CountryID，“，new{@class=“text danger”}）

分区控制：

 <div id="showStateLga" style="display: none">
                <div class="form-group">
                    @Html.LabelFor(model => model.notState, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.notState, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.notState, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.notCity, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.notCity, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.notCity, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>

@LabelFor（model=>model.notState，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.notState，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.notState，“，new{@class=“text danger”}）
@LabelFor（model=>model.notCity，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.notCity，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.notCity，“，new{@class=“text danger”}）

渲染结果：

下拉列表：

    <div class="form-group">
                    <label class="control-label col-md-2" for="CountryID">Country:</label>
                    <div class="col-md-10">
                        <select class="form-control" data-val="true" data-val-number="The field Country: must be a number." data-val-required="Select country" id="CountryID" name="CountryID"><option value="">---Select---</option>
                   <option value="1">Afghanistan</option>
                   <option value="2">Ghana</option>
                   <option value="3">Albania</option>
                   <option value="4">Algeria</option>
                       </select>
                        <span class="field-validation-valid text-danger" data-valmsg-for="CountryID" data-valmsg-replace="true"></span>
                    </div>
                </div>

国家：
---挑选---
阿富汗
加纳
阿尔巴尼亚
阿尔及利亚

第1部分：

声明：
---选择状态---
阿比亚州
阿达马瓦州
阿克瓦伊本州
城市：
---选择LGA---

第2部分：

声明：
城市：

我发现了问题。也就是说，$（“#CountryID”）的值是CountryID，而不是CountryName

$(function () {
    $(document).ready(function() {
        $("#CountryID").change(function () {
            if ($(this).val() != "Ghana") { // It doesn't work over here.
                $("#showStateLga").show();
            } else {
                $("#showStateLga").hide();
            }
        });
    });
});

有两种方法可以修复它。首先

if ($(this).val() != "2") { // Replace the match text to CountryID.

或

---

感谢您的回复，现在只有.show（）部分可以工作，在显示之后，div甚至拒绝隐藏。请问还有什么我可以做的吗？你能告诉我Dropdownlist控件和Div控件部分的渲染结果吗？我不知道你所说的渲染结果是什么意思。通常，带有@html的代码都是服务器端程序。所以服务器将运行该程序并生成一个完美的html文件到浏览器。无论如何，呈现结果意味着html源代码。顺便说一句，我为什么需要结果可能是因为UI问题。渲染结果太长，即使我删除了某些部分，也无法添加为注释，我现在不知道如何将其发送给您，

$(function () {
    $(document).ready(function() {
        $("#CountryID").change(function () {
            if ($(this).val() != "Ghana") { // It doesn't work over here.
                $("#showStateLga").show();
            } else {
                $("#showStateLga").hide();
            }
        });
    });
});

if ($(this).val() != "2") { // Replace the match text to CountryID.

if ($(this).find(':selected').text() != "Ghana") { // Replace .val() to .find(':selected').text().