如何在HTML選擇中實現重命名選項？

我希望用戶能夠選擇一個選項，並能夠在點擊「重命名」按鈕時對其進行重命名。

我試圖通過在選定的option中嵌套input type = "text"。然而，onblur事件在input是不工作...

看來，select不允許內部option嵌套的HTML元素，但它的功能是理想的...用什麼結構可能我實現了這樣的事情，一個無序列表？

如何在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; 
     } 
    } 
}

來源

2013-07-15 Ian Campbell

據我所知，'option'不支持這一點，它只是純文本。 – hiway

嗯，每當我使用options [selectedIndex] .innerHTML =「blah」測試它時，它會更改選項的文本。我也注意到它實際上改變了Select的innerHTML作爲一個按鈕，除非我在Chrome中沒有看到按鈕。 –

好吧，我知道了 -
原來我爲能夠以ul結構來實現這一點，和一些相當討厭的jQuery。

CSS：

#list { 
     list-style-type: none; 
    } 
    .highlighted { 
     background-color: #FFFF00; 
    }

HTML：

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

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

的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

的jsfiddle - http://jsfiddle.net/icampbell2/59YDF/

來源

2013-07-16 00:05:41

你也可以遍歷的選項：

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;

我會把它放在一個函數中，並傳遞一個你要搜索的值和更換，或地圖。喜歡的東西：

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

參考：HTMLSelectElement

來源

2013-07-15 05:33:01 Amol

感謝您的幫助@Amol，但不幸的是'

我做了一些改變，請嘗試。 – Amol

如何在HTML選擇中實現重命名選項？

回答

相關問題