Question

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

开头

即。

[SELECT BOX]
Apples
Oranges
Pears
Strawberries
Kiwi

用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";        
    } 
}

<强> EXAMPLE

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";
    }
}

替换选择框中的值而不必删除和重新填充

3 个答案: