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

时间:2016-09-07 13:37:08

标签: javascript jquery event-handling jquery-events

我有一个文本字段和一个日期文本字段。我试图用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>

从日历中选择日期时,应设置值“请选择问题解决者”。它运作得很好。

然后,如果您顺便输入日期,则应返回先前的默认值 - “选择一个选项”。

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

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

<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语句不会触发更改。可能是因为它无法识别值为''的默认选择选项。我不确定。无论如何,当我从文本字段中删除日期时,其他文本字段的值不会更改为“选择一个选项”,而是更改为“”。

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>

我知道有更好的方法可以做到这一点,但我正在寻找一个解决方案,主要是因为我不知道为什么这个改变触发器不会触发。

提前致谢!

1 个答案:

答案 0 :(得分:0)

我找到了导致问题的原因。事实证明

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

无法执行,因为这是默认选项,其背后的值为''。这必须弄乱.change()触发器并在其他脚本中创建破坏。

我把它改成了

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

......现在一切正常。