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

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

我试图通过在所选的

选项

中嵌套一个

input type=“text”

来实现这一点。但是，

输入中的
onblur
事件不起作用。。。



似乎
select
不允许在
选项
中嵌套HTML元素，但它的功能非常理想。。。我可以用什么结构实现这样的东西，无序列表？



以下是HTML：

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

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


asdf
qwerty



…下面是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;
        }
    }
}

函数重命名（）{
如果（$（“#asdf”）.length>0）{
var selectedText=$（“#asdf”）.find（“：selected”）.text（）；
var selectedIndex=$（“#asdf”）.find（“：selected”）.index（）；
var options=document.getElementById（“asdf”）.options；
选项[selectedIndex].innerHTML=
"";
函数设置字段（新名称）{
选项[selectedIndex].innerHTML=newName；
}
}
}
您可以循环选择以下选项：

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;   

参考资料：


好的，我知道了--

事实证明，我能够通过
ul
结构和一些相当糟糕的jQuery实现这一点。



CSS:



HTML:


asdf
qwerty




jQuery/javascript：

$("#list").on("click focus", "li", function() {
    $(this)
        .addClass("highlighted")
        .siblings().removeClass("highlighted");
});

function renameSearch() {
    $("#list li").each(function(index) {
        if ($(this).hasClass("highlighted")) {
            //alert(index + ": " + $(this).text());
            $(this).html("<input type = 'text' id = 'renameField' value = '" + $(this).text() + "' />");

            $("#renameField").focus();
            $("#renameField").select();

            $("#list li").on("focusout", "#renameField", function() {
                //alert($(this).val());
                $(this).parent().text($(this).val());
            });
        }
    });
} // end of function

$（“#列表”）。在（“单击焦点”，“li”，函数（）上）{
$（本）
.addClass（“突出显示”）
.sides（）.removeClass（“突出显示”）；
});
函数重命名搜索（）{
$（“#列表li”）。每个（函数（索引）{
if（$（this）.hasClass（“突出显示”））{
//警报（索引+”：“+$（this.text（））；
$（this.html（“”）；
$（“#重命名字段”）.focus（）；
$（“#重命名字段”）。选择（）；
$（“#list li”）。关于（“focusout”，“重命名字段”，函数（）{
//警报（$（this.val（））；
$（this.parent（）.text（$（this.val（））；
});
}
});
}//函数结束



jsFiddle--


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

由于找不到合适的解决方案，我写了下面这篇文章，我认为这篇文章效果很好，并且与上面提到的一模一样。与前面的答案相比，它似乎有点冗长，但它没有使用库

它使用
编辑给定
的文本。
的大小和位置位于选择按钮的顶部，并且在实际不处于“编辑”模式时隐藏（当输入没有焦点时）


//Javascript
var D=文件；
函数E（id）{返回D.getElementById（id）；}
var WIDGET_NAMES=[0、'Orange'、'Loud'、'Steel'、'Sky'、'Wheat'、''、'Almond'、'Oak'、'Water'、'Vague']；
var$select_widget=E（“ESL_select_widget”）；
var$widget_name=E（'ESL_widget_name'）；
var$rename_widget=E（'ESL_rename_widget'）；
var$delete_widget=E（“ESL_delete_widget”）；
功能Pad10（编号）{
如果（（数字*1）<10）{var pad=“”；}其他{var pad=“”；}
返回焊盘+编号；
}//完Pad10()
$select_widget.addEventListener（“更改”，函数（）{
$widget_name.value=widget_name[$select_widget.value]；
});
$select_widget.addEventListener（“按键”，函数（事件）{
//是的，需要模糊（）和焦点（）。。。
如果（event.keyCode==13）{
D.activeElement.blur（）；
$widget_name.style['visibility']=“visible”；
$widget_name.focus（）；
}
});
$widget_name.addEventListener（“按键”，函数（事件）{
//是的，需要模糊（）和焦点（）。。。
如果（event.keyCode==13）{
D.activeElement.blur（）；
$select_widget.focus（）；
}
});
$widget_name.addEventListener（“模糊”，函数（事件）{
$widget_name.style['visibility']=“hidden”；
});
$widget_name.addEventListener（“更改”，函数（）{
this.value=this.value.trim（）；
var current_widget=$select_widget.value；
//选项从0开始计数，人员从1开始计数。
var option=$select_widget.options[当前_widget-1]；
option.innerHTML=Pad10（当前_小部件）+“：”+$widget_name.value；
小部件名称[当前小部件]=$WIDGET\u name.value；
});
$rename_widget.addEventListener（“单击”，函数（）{
$widget_name.style['visibility']='visible'；
$widget_name.focus（）；
});
$delete_widget.addEventListener（“单击”，函数（）{
var current_widget=$select_widget.value；
$select\u widget.options[current\u widget-1].innerHTML=Pad10（current\u widget）；
小部件名称[当前小部件]=''；
$widget_name.value=''；
});
对于（var x=1；x
好吧，
option
不支持这个，它只是纯文本。嗯，每当我用options[selectedIndex]测试它时。innerHTML=“blah”它更改了选项的文本。我还注意到它实际上将Select的innerHTML更改为一个按钮，只是我在Chrome中没有看到该按钮。感谢@Amol的帮助，但是不幸的是，
将不允许嵌套HTML…我做了一些更改，请尝试一下。
    #list {
        list-style-type: none;
    }
    .highlighted {
        background-color: #FFFF00;
    }

<ul id = "list">
    <li>asdf</li>
    <li>qwerty</li>
<ul>

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

$("#list").on("click focus", "li", function() {
    $(this)
        .addClass("highlighted")
        .siblings().removeClass("highlighted");
});

function renameSearch() {
    $("#list li").each(function(index) {
        if ($(this).hasClass("highlighted")) {
            //alert(index + ": " + $(this).text());
            $(this).html("<input type = 'text' id = 'renameField' value = '" + $(this).text() + "' />");

            $("#renameField").focus();
            $("#renameField").select();

            $("#list li").on("focusout", "#renameField", function() {
                //alert($(this).val());
                $(this).parent().text($(this).val());
            });
        }
    });
} // end of function