Обнаружение изменений в поле ввода в Edge - PullRequest
Новая
       8

Обнаружение изменений в поле ввода в Edge

1 голос
/ 10 января 2020

У меня есть список данных, который содержит список церемоний, и когда он выбран, он должен вызвать событие изменения в jquery, которое затем сгенерирует новый список данных с параметрами шаблона. Это работает в 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);

        });
    });

1 Ответ

1 голос
/ 13 января 2020

Вы должны привязаться к событию input вместо события change (которое запускается, когда была выбрана новая опция и фокусируется на другом элементе). Как сказано в do c, событие change не обязательно запускается для каждого изменения значения элемента.

Используйте событие input, например ниже: 

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

Например: 

$(document).ready(function () {
            $('#document').on('input', function () {
                console.log("changed");
                document.getElementById("tributeSelected").value = "";
                var x = $("#doc option[value='" + $('#document').val() + "']").attr('id');
                var data = JSON.parse('[{"TributeTypeID":"TributeTypeID1", "TributeName":"TributeTypeName1"},{"TributeTypeID":"TributeTypeID4", "TributeName":"TributeTypeName4"}]');
                var result = [];
                var search = "TributeTypeID";
                for (var i = 0; i < data.length; i++) {
                    if (data[i][search] == x) {
                        result.push(data[i].TributeName);
                    }
                }
                var options = '';
                for (var i = 0; i < result.length; i++) {
                    options += '<option value="' + result[i] + '"></option>';
                }
                document.getElementById('tribute').innerHTML = options;
            });
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>Select a document type:</label><input list="doc" id="document" name="Document" />
<datalist id="doc" name="Doc" placeholder="Please select a document type">
        <option id="TributeTypeID1" value="TributeTypeName1"></option>
        <option id="TributeTypeID2" value="TributeTypeName2"></option>
        <option id="TributeTypeID3" value="TributeTypeName3"></option>
        <option id="TributeTypeID4" value="TributeTypeName4"></option>
    </datalist>
<label>Select a tribute type:</label><input list="tribute" id="tributeSelected" name="Tribute" />
<datalist id="tribute"></datalist>
...