jQuery选择器为MVC生成的选择适用于一个下拉菜单，但不适用于另一个

Question

我有一个相当奇怪的问题，使用与JQuery选择器的@HTML.EnumDropDownListFor()方法生成的MVC下拉列表。我在局部视图上有多个下拉列表。然而，当我使用jQuery选择器来获取第一个下拉框(QuestionType)的值时，它返回下拉框的原始(默认)值，而不是选中的值。另外两个下拉框(AnswerCommentType和Status)返回选择的值，没有问题。我使用.change()事件做了一些进一步的测试，看看是否使用jQuery选择器触发了该事件。.change()事件是由$("select").change()触发的，而不是由$("#QuestionType").change()选择器触发的。此外，我还查看了原始HTML代码，看看MVC生成的三个选择标签之间是否有任何区别;无显著性差异。有人知道这是怎么回事吗?

下面是部分视图中带有下拉列表的部分的HTML:

        <div class="container">
        <div class="row">
            <div class="col-md-6 nopadding">
                <span>Question Type:</span><br />
                @Html.EnumDropDownListFor(x => x.QuestionType)<br />
                <span>Answer Type:</span><br />
                @Html.EnumDropDownListFor(x => x.AnswerCommentType)<br />
                <span>Sequence:</span><br />
                @Html.TextBoxFor(x => x.DisplayOrder)<br />
                <span>Activity Status:</span><br />
                @Html.EnumDropDownListFor(x => x.Status)<br />
                <span>Short Display Text:</span><br />
                @Html.TextBoxFor(x => x.ShortDisplayText)<br />
            </div>
            <div class="col-md-6 nopadding">
                <span>Options:</span><br />
                @Html.ListBox("Options", new SelectList(Model.OptionValues))<br />
                <input type="button" id="addOption" value="Add" />
                <input type="button" id="removeOption" value="Remove" />
            </div>
        </div>
    </div>

$("#QuestionType").val()总是返回"0"，不管选择了什么选项。$("#AnswerCommentType").val()总是返回选中的选项。$("#Status").val()总是返回选中的选项。

和，这里是测试jQuery事件的副本:

//Responds to all select change events
$("select").change(function () {
    debugger;
});
//Responds to AnswerCommentType change events
$("#AnswerCommentType").change(function () {
    debugger;
});
//Never responds
$("#QuestionType").change(function () {
    debugger;
});

最后，这里是由MVC生成的QuestionType和AnswerCommentType的原始HTML代码的副本:

<div class="col-md-6 nopadding">
<span>Question Type:</span><br>
<select name="QuestionType" id="QuestionType" data-val-required="The QuestionType field is required." data-val="true">
    <option selected="selected" value="0"></option>
    <option value="1">Customer</option>
    <option value="2">EquipmentFrontDriver</option>
    <option value="3">EquipmentRearDriver</option>
    <option value="4">EquipmentFrontPassenger</option>
    <option value="5">EquipmentRearPassenger</option>
    <option value="6">Front</option>
    <option value="7">Rear</option>
    <option value="8">DriverSide</option>
    <option value="9">PassengerSide</option>
    <option value="10">Receive</option>
    <option value="11">Position1</option>
    <option value="12">Position2</option>
    <option value="13">Position3</option>
    <option value="14">Position4</option>
    <option value="15">Position5</option>
    <option value="16">Position6</option>
    <option value="17">Position7</option>
    <option value="18">Position8</option>
    <option value="19">Position9</option>
    <option value="20">Position10</option>
    <option value="21">Position11</option>
    <option value="22">Position12</option>
    <option value="23">Position13</option>
    <option value="24">Position14</option>
    <option value="25">Position15</option>
    <option value="26">Position16</option>
    <option value="27">Step2</option>
</select><br>
<span>Answer Type:</span><br>
<select name="AnswerCommentType" id="AnswerCommentType" data-val-required="The AnswerCommentType field is required." data-val="true">
    <option selected="selected" value="0">Header</option>
    <option value="1">YesNo</option>
    <option value="2">OkFix</option>
    <option value="3">None</option>
    <option value="4">Level1Checkbox</option>
</select><br>
<span>Sequence:</span><br>
<input name="DisplayOrder" id="DisplayOrder" type="text" value="0" data-val-required="The DisplayOrder field is required." data-val="true" data-val-number="The field DisplayOrder must be a number."><br>
<span>Activity Status:</span><br>
<select name="Status" id="Status" data-val-required="The Status field is required." data-val="true">
    <option selected="selected" value="0">Active</option>
    < option value="1">Inactive</option>
</select><br>
<span>Short Display Text:</span><br>
<input name="ShortDisplayText" id="ShortDisplayText" type="text" value=""><br>

我看不出可能导致此问题的显著差异。此外，我验证了这种行为在Internet Explorer和Chrome上都是相同的。我使用jQuery-3.1.0, jQuery-ui-1.12.0和MVC 4.5.2。什么好主意吗?

Answer 1

请检查相同的id="QuestionType"是否存在?根据@ekad.

如果没有，在dom完成加载后注册change event，如下所示:

$(document).ready(function () { 
    setTimeout(function () {
        $("#QuestionType").change(function () {
            debugger;
        });
    }, 500);
});