javascript - 如何在 HTML 选择中实现重命名选项？

Question

我希望用户能够选择一个选项，并能够在单击“重命名”按钮时重命名它。

我尝试通过在选定的 option 中嵌套 input type = "text" 来实现这一点。但是，input 中的 onblur 事件不起作用...

似乎 select 不允许在 option 中嵌套 HTML 元素，但它的功能是理想的......我可以用什么结构来实现这样的东西，一个无序列表？

---

这是 HTML:

<select id = "asdf" size = "2">
    <option>asdf</option>
    <option>qwerty</option>
</select>

<input type = "button" value = "rename" onclick = "rename();" />

...这是 javascript/jQuery:

function rename() {
    if ($("#asdf").length > 0) {
        var selectedText = $("#asdf").find(":selected").text();
        var selectedIndex = $("#asdf").find(":selected").index();
        var options = document.getElementById("asdf").options;

        options[selectedIndex].innerHTML =
           "<input type = 'text' id = 'field' onblur = 'setField(this.value);'" +
           "value = '" + selectedText + "' />";

        function setField(newName) {
            options[selectedIndex].innerHTML = newName;
        }
    }
}

Answer 1

你可以遍历选项:

for(var i = 0, l = select.options.length; i < l; i++) 
 {
    var option = select.options[i];
    var obj = {};
    if(option.value == "...")
    {
        option.innerHTML = "...";
        obj[option.value] = option.innerHTML;
    }
 }
 return obj;   

我会把它放在一个函数中，并传递一个你搜索的值和替换值，或者一个 map 。像这样的东西:

setOptionText(select, 'value', 'text');
// or
setOptionText(select, {'value': 'text', 'value': 'text', ...});

引用:HTMLSelectElement