Как скрыть и показать div в asp.net mvc 5, используя событие изменения выпадающего списка

Я пытаюсь скрыть и показать div в своем проекте mvc 5, используя событие изменения выпадающего списка, я исследовал, и, к счастью, я нашел этот код в Интернете, но, похоже, он не работает для меня, я буду признателен, если кто-то может указать, где Я делаю ошибки. Заранее спасибо.

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

Элемент управления выпадающего списка:

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

Div Control:

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

Результаты рендеринга:

Выпадающий список:

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

Div1:

    <div id="showStateLga" style="display:block">

                    <div class="form-group">
                        <label class="control-label col-md-2" for="UserStateList">State:</label>
                        <div class="col-md-10">
                            <select class="form-control" id="State" name="State"><option value="">---Select State---</option>
                          <option value="1">Abia State</option>
                         <option value="2">Adamawa State</option>
                          <option value="3">Akwa Ibom State</option>

                        </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2"              for="UserCity">City:</label>
                        <div class="col-md-10">
                            <select id="lga" name="lga" class="form-control"    required>
                                <option value="">---Select LGA---</option>
                            </select>
                        </div>
                    </div>
                    </div>

Div2:

<div id="showStateLgaText" style="display:none">
                    <div class="form-group">
                        <label class="control-label col-md-2" for="notNigeriaState">State:</label>
                        <div class="col-md-10">
                            <input class="form-control text-box single-line" data-val="true" data-val-required="Enter state" id="notNigeriaState" name="notNigeriaState" type="text" value="" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="notNigeriaState" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2" for="notNigeriaCity">City:</label>
                        <div class="col-md-10">
                            <input class="form-control text-box single-line" data-val="true" data-val-required="Enter city" id="notNigeriaCity" name="notNigeriaCity" type="text" value="" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="notNigeriaCity" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                </div>

Ответы на вопрос(1)

Решение Вопроса

# CountryID")CountryId вместоНазвание страны.

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

Есть 2 способа это исправить. Первый

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

Или же

if ($(this).find(':selected').text() != "Ghana") { // Replace .val() to .find(':selected').text().
 Anson29 июн. 2016 г., 10:47
Используйте песочницу, такую ​​как jsfiddle или jsbin.
 Anson29 июн. 2016 г., 02:30
Не могли бы вы дать мне результаты рендеринга обоихКонтроль выпадающего списка а такжеDiv Control части?
 UwakPeter29 июн. 2016 г., 10:40
Результат рендеринга слишком длинный, чтобы добавить его в качестве комментария, даже если я удалил какую-то часть, я не знаю, как отправить это вам сейчас,
 UwakPeter29 июн. 2016 г., 08:01
Я не знаю, что вы подразумеваете под рендерингом результата.
 UwakPeter29 июн. 2016 г., 11:35
Вы качаетесь, я просто смеюсь над своим невежеством, которое решило проблему, большое спасибо, я действительно ценю.
 UwakPeter28 июн. 2016 г., 18:05
спасибо за ваш ответ, только часть .show (), которая работает сейчас, после показа, div отказалась скрываться даже. пожалуйста, есть что-нибудь еще, что я могу сделать?
 Anson29 июн. 2016 г., 11:13
Я нашел причину вашей проблемы. Пожалуйста, смотрите обновленный ответ.
 UwakPeter29 июн. 2016 г., 10:52
Я не знаю, как использовать эти инструменты, но я отредактировал свой вопрос, чтобы включить результаты рендеринга. Спасибо
 Anson29 июн. 2016 г., 08:17
Как правило, коды с добавлением@html являются серверной программой. Таким образом, сервер запустит программу и сгенерирует отличный HTML-файл для браузера. Тем не мение,результат рендеринга означает источник HTML. Кстати, зачем мне нужен результат, возможной причиной может быть проблема пользовательского интерфейса.

Ваш ответ на вопрос