检测Edge中输入字段的变化

Question

我有一个数据列表，其中包含一个仪式列表，当选择一个仪式列表时，它将触发jquery中的change事件，然后将使用模板选项生成一个新的数据列表。这确实适用于Chrome，但是在Edge中，我可以从列表中选择一个项目，然后什么也没有发生。

<label>Select a document type:</label><input list="doc" id="document" name="Document" />
                    <datalist id="doc" name="Doc" placeholder="Please select a document type">
                        @foreach (var item in Model.tribType)
                        {
                            <option id="@item.TributeTypeID" value="@item.TributeTypeName"></option>
                        }
                    </datalist>
<label>Select a tribute type:</label><input list="tribute" id="tributeSelected" name="Tribute" />
                    <datalist id="tribute"></datalist>

 $(document).ready(function () {
        $('#document').change(function () {
            document.getElementById("tributeSelected").value = "";
            var x = $("#doc option[value='" + $('#document').val() + "']").attr('id');

            var trib = @Html.Raw(Json.Encode(Model.tribute));
            var data = JSON.parse(JSON.stringify(trib));
            var result = [];
            var search = "TributeTypeID";
            for (var i = 0; i < data.length; i++) {
                if (data[i][search] == x) {
                    result.push(data[i].TributeName);
                }
            }

            //console.log(x);
            //console.log(result);

            var options = '';
            for (var i = 0; i < result.length; i++) {
                options += '<option value="' + result[i] + '"></option>';
                //console.log(result[i]);
            }
            document.getElementById('tribute').innerHTML = options;

            //const test = Selected;
            //console.log(test);

        });
    });

Answer 1

您应该绑定到input event而不是input事件（选择了新选项并将焦点赋予另一个元素时将触发该事件）。如change中所述，对于元素值的每次更改，doc事件不一定会触发。

使用如下所示的change事件：

input

例如：

$('#document').on('input', function () {...});

$(document).ready(function() {
  $('#document').on('input', function() {
    var x = $("#doc option[value='" + $('#document').val() + "']").attr('id');
    console.log(x);
  });
});