Question

我需要更改使用jQuery SelectPicker的下拉列表的所有<option ...> ... </option>元素中的文本。这些值都不应该生效。

最初，填充选项时，选项文本中会有XX的占位符。例如：

GHO.502/TT3-XX04-F.P1

所有选项文本都具有相似的格式。我需要遍历每个选项文本，更改XX值并保存更改。

此更改取决于可能来回更改的另一个控件，但XX在第一次更改后显然已消失。所以我想我可以在document.ready中保存最初的<select>：

_savedSelect = $('#mySelect');

此时我可以在需要时迭代_savedSelect，阅读包含XX占位符的默认文本，修改每个文本，然后将它们保存到实际<option>的{{1}}元素中。

修改所有文本后：

<select>

但我不确定如何迭代保存的选择中的所有选项，获取每个选项的文本，替换$("#mySelect").selectpicker('refresh');占位符，然后将其保存到实际的选择选项中。

有人能告诉我如何做到这一点吗？

修改

我已经找到了.each的一部分：

XX

如何从保存的选择中获取相应的文本值？

更新

@ madalinivascu的答案之一有些作用，但并非完全如此：

$("#mySelect > option").each(function () {
    $newtext = HOW TO GET CORRESPONDING TEXT FROM _savedSelect??;
    this.text = $newtext.replace( 'XX', $('#someInput').val() );
});

$("#mySelect").selectpicker('refresh');

但这只会在$("#mySelect> option").each(function () { $textarr = $(this).text().split('XX'); $newtext = $textarr[0] + $('#someInput').val() + $textarr[1]; $(this).text($newtext); });被替换后第一次更改输入控件时起作用。在我上面的描述中，我提到在变量中保存XX的初始状态。这样我总是会在文本字符串中添加占位符 - 我的问题是我不知道如何访问已保存变量中的文本值。

Answer 1

尝试以下操作，克隆选择页面后加载，循环它并根据克隆元素的值将页面元素文本更改为所需文本

$cloned = $("#mySelect").clone();

$('input').on('change',function(){
 $cloned.find('option').each(function () {
    $textarr= $(this).text().split('XX');
    console.log($textarr);

    $newtext =  $textarr[0]+$('input').val()+$textarr[1];
    $("#mySelect > option[value='"+$(this).val()+"']").text($newtext);
 });
});

演示：https://jsfiddle.net/egu3wo8k/1/

如何更改SelectPicker中的所有<option>文本

1 个答案: