当我使用 javascript 选择默认下拉值时，它不会触发更改

Question

我有一个文本框和一个日期文本框。我正在尝试将它们与 Javascript 连接起来，但我遇到了问题。我的脚本是：

         <script>
            $("#solDate").change(function () {
                if ($(this).val().trim() == '') {
                    $("#caseStatus").val('In Progress');
                    $("#solvedBy").val('Pick an option');
                    $("#solvedBy").change();
                }
                else if ($(this).val().trim() != '' && $("#solvedBy").val().trim() == '') {
                    $("#caseStatus").val('Solved');
                    $("#solvedBy").val('Please, pick the issue solver');
                    $("#solvedBy").change();
                }
            });
        </script>

当从日历中选择日期时，它应该设置一个值'Please, pick the issue solver'。它完美运行。

然后，如果您偶然输入了日期，它应该 return 以前的默认值 - "Pick an option"。

在这两种情况下，都会触发更改。

然后，另一个触发器正在侦听这些更改。

<script>
        $("#solvedBy").change(function () {
            if ($(this).val() == 'Please, pick the issue solver') {
                $("#saveBtn").attr('disabled', true);
                $("#slvByValMsg").text('You have solution date and no solver');
            }
            else if ($(this).val().trim() == '' && $("#solDate").val().trim() != '') {
                $("#saveBtn").attr('disabled', true);
                $("#slvByValMsg").text('You have solution date and no solver');
            }
            else {
                $("#saveBtn").attr('disabled', false);
                $("#slvByValMsg").text('');;
            }
        });
    </script>

经过我的故障排除后，第一个脚本中的第一个 if 语句没有触发更改。可能是因为它不识别值为“”的默认选择选项。我不知道。无论如何，当我从文本字段中删除日期时，另一个文本字段的值不会更改为 'Pick an option'，而是更改为 ''。

HTML代码：

 @Html.LabelFor(model => model.Solution_Date, htmlAttributes: new { @class = "control-label col-md-2" })<sup> 1 </sup>
 <div class="col-md-10">
      @Html.TextBoxFor(model => model.Solution_Date, new { @id = "solDate", @class = "one", @type = "datetime" })
      <br />
      @Html.ValidationMessageFor(model => model.Solution_Date, "", new { @class = "text-danger" })
 </div> 

@Html.LabelFor(model => model.Solved_by, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="dropdown">
     @Html.DropDownListFor(model => model.Solved_by, (IEnumerable<SelectListItem>)ViewBag.SlvBy, "Pick an option", new { @id = "solvedBy" })
<br />
@Html.ValidationMessage("Solved_by", "", new { @id = "slvByValMsg", @class = "text-danger" })
</div>

我知道可能有更好的方法来执行此操作，但我正在寻找解决方案，主要是因为我不知道为什么此更改触发器没有触发。

提前致谢！

Answer 1

我已经找到导致问题的原因。结果是

$("#solvedBy").val('Pick an option');

无法执行，因为这是默认选项，后面的值为''。这一定会弄乱 .change() 触发器并在其他脚本中造成严重破坏。

我改成了

$("#solvedBy").val('');

...现在一切正常。

当我使用 javascript 选择默认下拉值时，它不会触发更改

When I pick default dropdown value with javascript, it doesn't trigger change

javascript

jquery

event-handling

jquery-events