javascript - HTML/JS 如何将选项填充/更新/添加到元素？

Question

我目前正在尝试让用户能够重命名他们的设备（设备存储在 DB 中）或从一些预定义的设备名称中进行选择。如果不存在具有该名称的设备，我希望创建一个新实例。

HTML

<form id="rename-device-tracks">
        <fieldset>
            <label for="rename-track-datalist" class="translate_text" data-translation="NEW_DEVICE_NAME"></label>
            <input type="text" id="rename-track-datalist" list="track-datalist" placeholder="...">
            <datalist id="track-datalist"></datalist>
        </fieldset>

        
        <footer class="form-footer">
            <button class="cancel button type1" data-mode="cancel" type="button">
                <span class="fa fa-times"></span>&nbsp;
                <span class="translate_text" data-translation="CANCEL"></span>
            </button>
            <button class="rename button type1" data-mode="rename" type="button" style="margin-left: 0.4em;">
                <span class="fa fa-pencil"></span>&nbsp;
                <span class="translate_text" data-translation="RENAME"></span>
            </button>
        </footer>
    </form>

JS/JQUERY

var dataList = document.getElementById('track-datalist');
var input = document.getElementById('rename-track-datalist');

// Create a new XMLHttpRequest.
var request = new XMLHttpRequest();

// Handle state changes for the request.
request.onreadystatechange = function(response) {
    if (request.readyState === 4) {
        if (request.status === 200) {
            var jsonOptions = JSON.parse(request.responseText);

            // Create a new <option> element..
            jsonOptions.forEach(function(item) {
                var option = document.createElement('option');
                option.value = item;
                dataList.appendChild(option);
            });

            // Update the placeholder text.
            input.placeholder = "rename track";
        } else {
            // An error occured :(
            input.placeholder = "error loading track datalist";
        }
    }
};

// Update the placeholder text.
input.placeholder = "Loading options...";

// Set up and make the request.
request.open('GET','URL');
request.send();

var renameDeviceTracks = {
    selectors: {
        formBox: '#rename-device-tracks-form-box',
        form: '#rename-device-tracks',
        infoBox: '.data-info-track'
    },
    isInitialised: false,
    node: null,
    newAlias: '',


    init: function() {
        var self = this;
        var formBox = document.querySelector(this.selectors.formBox);

        var inputs = formBox.querySelectorAll('.validate-input-alias-track');
        inputs.forEach( function(el) {
            el.addEventListener('change', self);
            el.addEventListener('input', self);
        });

        var buttons = formBox.querySelectorAll('footer button');
        buttons.forEach( function(btn) {
            btn.addEventListener('click', self);
        });

        this.isInitialised = true;
    },
    handleEvent: function(e) {
        e.stopPropagation();

        var currentTarget = e.currentTarget;
        var btnDataSet = currentTarget.dataset;

        if (currentTarget.classList.contains('validate-input-alias-track')) {
            this.validateNewAlias(currentTarget);
        }

        if (btnDataSet.mode === 'cancel') {
            this.close();
        }
        if (btnDataSet.mode === 'rename') {
            this.renameDeviceTracks();
        }
    },

出于隐私原因，我删除了 HttpRequest 的 URL，但这部分有效。当我开始输入字母时，我的输入/数据列表会填充数据库中的项目。

如果数据列表没有具有该名称的先前项目，我在使用 POST 创建新项目（包括 JSON）时遇到问题。

任何建议表示赞赏！

在此处输入图像描述

标签： javascripthtmljqueryjsonhttp