Проблема с событием JQuery onchange ()

Question

Итак, у меня есть выпадающий список и текстовое поле:

<table>
                        <tr>
                            <td>Group Name: </td>
                            <td><%= Html.DropDownListFor(m => m.IndicationCalculatorGroupId, DropDownData.IndicationsGroup(SessionManager.Company.EntityID, ICConstants.IndicationsCalculatorGroupType), "", new { propertyName = "IndicationCalculatorGroupId", onchange = "UpdateField(this, false);GroupNameChange();" })%></td>
                        </tr>
                        <tr id="newGroupNameRow">
                            <td>New Group Name: </td>
                            <td><%= Html.TextBoxFor(m => m.IndicationCalculatorNewGroupName, new { @class = "economicTextBox", propertyName = "IndicationCalculatorNewGroupName", onchange = "UpdateField(this);" })%></td>
                        </tr>
                    </table>

У меня есть JQuery на странице, которая показывает / скрывает текстовое поле на основе выпадающего списка.

function GroupNameChange()
        {
            $("#IndicationCalculatorGroupId").change(function() {
                if ($("#IndicationCalculatorGroupId option:selected").text() == 'Create a New Group')
                {
                    $("#newGroupNameRow").show();
                }
                else{
                    $("#IndicationCalculatorNewGroupName").val('');
                    $("#newGroupNameRow").hide();
                }
            });
        }

Но, похоже, что в первый раз, когда вы изменяете раскрывающийся список на «Создать новую группу», текстовое поле не показывает или ничего не делает, оно появляется только тогда, когда вы выбираете какое-то другое значение и ТО затем выбираете «Создать Новая группа "код начинает работать.

Что не правильно подключено?

Answer 1

Вместо:

function GroupNameChange()
        {
         ...
        }

Использование:

$(document).ready(function()
        {
            $("#IndicationCalculatorGroupId").change(function() {
                if ($("#IndicationCalculatorGroupId option:selected").text() == 'Create a New Group')
                {
                    $("#newGroupNameRow").show();
                }
                else{
                    $("#IndicationCalculatorNewGroupName").val('');
                    $("#newGroupNameRow").hide();
                }
            });
        });

В данный момент GroupNameChange () необходимо вызвать один раз (первый вызов) для регистрации обработчика изменений. Вы хотите, чтобы это произошло при загрузке страницы (при событии ready). Вам также не нужен вызов GroupNameChange () в onchange. .change () будет автоматически подключен. Вы можете полностью удалить onchange и вызвать updateField из имеющегося у вас обработчика .change ().

В качестве альтернативы, если вы хотите сохранить GroupNameChange, удалите

$("#IndicationCalculatorGroupId").change(function() {
});

и просто держите линии, где находится функция. Это будет вызывать GroupNameChange каждый раз, как вы предлагали, без вызова другого анонимного обработчика изменений.

Answer 2

попробуйте поставить код при загрузке страницы:

$(function() {

  $("#IndicationCalculatorGroupId").change(function() {
                if ($("#IndicationCalculatorGroupId option:selected").text() == 'Create a New Group')
                {
                    $("#newGroupNameRow").show();
                }
                else{
                    $("#IndicationCalculatorNewGroupName").val('');
                    $("#newGroupNameRow").hide();
                }
            });


});

Answer 3

Событие onChange запускается после изменения значения (т. Е. После щелчка по полю выбора).Вы должны использовать событие mouseDown ().