Question

有这样的情况：

<select id="trollSelect">
    <option value="PL">Troll</option>
    <option value="EN">Troll</option>
    <option value="JP">Troll</option>
</select>

我希望更改$(#trollSelect option).text("NEW_VALUE")中的$(document).ready(function() {...} - 当页面准备就绪时。

最终效果应该是这样的：

<select id="trollSelect">
    <option value="PL">Pan Troll</option>
    <option value="EN">Mr Troll</option>
    <option value="JP">Troll Sama</option>
</select>

我不想使用服务器端脚本，必须在JQuery或JavaScript中完成。是否可以执行foreach(options)？

之类的操作

更新：

我想以这种方式为选项生成Text：

function getTrollText(isoCode)  // isoCode from option.val()
{
    [...] // some magic, it does not matter
    return result;  // Here will be returned the text:
                    // "Pan Troll", "Mr Troll", or "Troll Sama"
}

Answer 1

因为你还没有提到我将把它们存储在数组中的选项。然后你可以迭代选项并使用选项索引为每个选项设置html以从数组中获取新文本：

$(function () {
 var chngearr=['Pan Troll','Mr Troll','Troll Sama'];
 $('#trollSelect option').each(function(){
    $(this).html(chngearr[$(this).index()]);
 });
});

<强> Working Demo

Answer 2

尝试，

$(document).ready(function() {
    var newValues = ['Pan Troll','Mr Troll','Troll Sama'];
    $('#trollSelect option').each(function(i,_){
      $(this).text(newValues[i]);
    });
});

Answer 3

是。试试这个：

$(function () {
    var arr = ['Pan Troll','Mr Troll','Troll Sama'];
    $('#trollSelect option').text(function (index, value) {
        return arr[index];
    });
});

这使用.text()的函数回调重载，它传递两个参数index，即实际索引，从0开始，因此可用于访问arr值

Answer 4

选中 Demo

$(document).ready(function(){
    var arr = ['Pan Troll','Mr Troll','Troll Sama'];
        $('#trollSelect option').each(function(i){
        console.log($(this).html(arr[i]));
    });
});

OR

$(document).ready(function(){
    var arr = ['Pan Troll','Mr Troll','Troll Sama'];
        $.each($('#trollSelect option'),function(i){
        console.log($(this).html(arr[i]));
    });
});

使用 .each() 来迭代<option>

Answer 5

$(document).ready(function() {
    $('#trollSelect option').each(function(i,_){
      $(this).text(getTrollText($(this).val()));
    });
});

也许这种方式会很好。

更改HTML中的文本选择选项

5 个答案: