Question

我有一个动态添加元素的选择标签。我需要向select标记中的每个元素添加事件侦听器，但第一个除外：

将元素的文本添加到列表中，使列表的焦点再次成为第一个元素，并且删除或隐藏被单击的元素。

第一个元素是一个'none'元素，不需要任何事件侦听器。

我尝试过类似的事情

for (var i = 0; i < array.length; i++)
{
    var name = array[i];
    var selectElement = document.getElementById(selectElementId);

    addToSelectNode(document.getElementById(selectElementId), name);

    var thisNode = selectElement.childNodes[i];

    if (thisNode.value != "none")
    {
        thisNode.addEventListener("click", function(event)
        {       
            appendNodeToList("artist-list", i);
            selectElement.selectedIndex = 0;
            selectElement.remove(selectElement.i);
            selectElement.style.display = "none";
        });
    }
}

function addToSelectNode(element, optionText)
{
    var newSelectElement = document.createElement("option");
    newSelectElement.text = optionText;
    element.add(newSelectElement);
}

function appendNodeToList(listId, text)
{
    var newNode = document.createElement("LI");
    var textNode = document.createTextNode(text);
    newNode.appendChild(textNode);
    document.getElementById(listId).appendChild(newNode);
}

虽然根本没用

Answer 1

几个小时后，我解决了自己的问题。问题源于试图删除选择标签中无法正常工作的项目-我很确定是否可行，但将其禁用可以解决问题。无论如何，这就是结果。

HTML：

<select id="artist-select-list">
            <option value="none">none</option>
</select>

JavaScript：

window.onload = function()
{
    var dropdown = document.getElementById("sampleDropdown");
    var n = array.length;

    // Loop to add to <select> dropdown
    for (var i = 1; i <= n; i++)
    {
        addToSelectNode(dropdown, array[i - 1]);
    }

    // Loop to add id's to each element in the dropdown
    for (var i = 0; i <= n; i++)
    {
        dropdown[i].id = "selectNum" + i;
    }

    // Loop to add event listener
    for (var i = 0; i < dropdown.length; i++)
    {
        dropdown[i].addEventListener("click", function(event)
        {
            // Regardless of which option the user clicks move shown option to "none" (first index in dropdown)
            dropdown.selectedIndex = 0;

            if (event.target.id != "selectNum0")
            {
                // Disable once clicked
                event.target.disabled = true;

                // Do other things here in relation to event.target
            }
        });
    }
}

var array =
[
    "sampleText1", "sampleText2"
];

function addToSelectNode(element, optionText)
{
    var newSelectElement = document.createElement("option");
    newSelectElement.text = optionText;
    element.add(newSelectElement);
}

添加onClick函数以选择元素

1 个答案: