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() {

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


});

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

Answer 3

更改值后触发onChange事件（即：单击选择框后）。你应该使用mouseDown（）事件。

JQuery onchange（）事件的问题

3 个答案: