javascript - 替换选择框中的值而无需删除和重新填充

Question

我想知道是否可以使用 javascript 来替换选择框中的行或值。请注意：选择框已经用 javascript 动态填充以开始

IE。

[SELECT BOX]
Apples
Oranges
Pears
Strawberries
Kiwi

将 (Oranges) 替换为 Mangos，因此新列表显示为：

[SELECT BOX]
Apples
Mangos
Pears
Strawberries
Kiwi

Answer 1

使用 jQuery。筛选。jsfiddle

 $("select option").filter(function(){
   return $.trim(this.innerHTML) == "Oranges"; 
}).html("Mangos");​

Answer 2

可能有更好的方法来做到这一点，特别是如果您愿意使用 jQuery - 但 OP 并不清楚，所以这里有一个纯 JavaScript 解决方案。

HTML

<select id="fruit">
    <option value="Apples">Apples</option>
    <option value="Oranges">Oranges</option>
    <option value="Pears">Pears</option>
    <option value="Strawberries">Strawberries</option>
    <option value="Kiwi">Kiwi</option>
</select>​​​​​​​​​​​​​​

JAVASCRIPT

​var el = document.getElementById("fruit");

for(var i=0; i < el.options.length; i++){
    if(el.options[i].value == "Oranges"){
        el.options[i].value = "Mangos";
        el.options[i].innerText = "Mangos";        
    } 
}

例子

Answer 3

    jQuery(function () { // fire when DOM ready
        jQuery("select:eq(0)").find("option").each(function () { // for loop
            if (jQuery(this).text().indexOf("Oranges") > -1) { // check text with current option
                jQuery(this).text("Mangos"); // set net text
                jQuery(this).val("mangos"); // set new value
            }
        });
    });

---

原生 JavaScript：

var elem = document.getElementsByTagName("select")[0].getElementsByTagName("option");
    for (var i = 0; i < elem.length; i++) {
        if (elem[i].innerHTML.indexOf("Oranges") > -1) {
            elem[i].innerHTML = "Mangos";
            elem[i].value = "mangos";
    }
}