JQuery onchange() 事件的问题答案

【问题标题】：Issue with JQuery onchange() eventJQuery onchange() 事件的问题
【发布时间】：2011-02-23 23:20:50
【问题描述】：

所以我有一个下拉列表和一个文本框：

<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();
                }
            });
        }

但似乎第一次将下拉菜单更改为“创建新组”时，文本框不会显示或执行任何操作，只有当您选择其他值然后选择“创建新组”时新组”，代码是否开始工作。

什么接线不正确？

【问题讨论】：

标签： jquery html html-helper

【解决方案1】：

尝试在页面加载时放置您的代码：

$(function() {

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


});

【讨论】：

它可以工作，只是当您从空的“空”选择转到“创建新组”选择时就不行了。
@slandau - 这是因为，正如我在回答中解释的那样，直到第一次调用 GroupNameChange 之后才设置您的更改处理程序。这就是@alexl 的答案会起作用的原因——它会立即设置处理程序。

【解决方案2】：

代替：

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() 一次（第一次调用）才能注册更改处理程序。您希望在页面加载时（在就绪事件中）发生这种情况。您也不需要在 onchange 中调用 GroupNameChange()。 .change() 将自动连接。您可以完全删除 onchange 并从您拥有的 .change() 处理程序中调用 updateField。

或者，如果您想保留 GroupNameChange，请删除

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

并且只保留函数所在的行。这将按照您的建议每次调用 GroupNameChange，而不会调用其他匿名更改处理程序。

【讨论】：

【解决方案3】：

一旦值发生更改（即：单击选择框后），就会触发 onChange 事件。您应该使用 mouseDown() 事件。

【讨论】：