如何更改全部<option> SelectPicker中的文本

我需要更改使用jQuery SelectPicker的下拉列表的所有<option ...> ... </option>元素中的文本。沒有一個值應該被影響。如何更改全部<option> SelectPicker中的文本

最初，當選項被填充時，在選項文本中有一個佔位符XX。例如：

GHO.502/TT3-XX04-F.P1

所有的選項文本都有這種類似的格式。我需要遍歷每個選項文本，更改XX值並保存更改。

更改取決於可能來回更改的另一個控件，但XX明顯在第一次更改後不再有效。所以，我想我可以節省的document.ready初始<select>：

_savedSelect = $('#mySelect');

此時需要的時候我可以通過_savedSelect迭代，讀取包含了XX佔位符默認文本，修改每個然後將它們保存到<option>實際的元素<select>。

修改所有文本後：

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

但我不知道如何遍歷所有選項中選擇保存，獲取每個文本，更換XX佔位符，然後將其保存到實際的選擇選項。

任何人都可以給我一個想法如何做到這一點？

編輯

我工作了。每個部分：

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

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

我如何從已保存的選擇對應的文本值？

UPDATE

一個@ madalinivascu的答案有點工作，但不完全：

$("#mySelect> option").each(function() { 
    $textarr = $(this).text().split('XX'); 
    $newtext = $textarr[0] + $('#someInput').val() + $textarr[1]; 
    $(this).text($newtext); 
});

但這隻會工作以來的第一次XX被替換的輸入控制被改變。在我上面的描述中，我提到將#mySelect的初始狀態保存在一個變量中。這樣我總是會在文本字符串中包含佔位符 - 我的問題是我不知道如何訪問保存的變量中的文本值。

來源

2016-07-26 rwkiii

使用$ 。每個循環選項 – madalinivascu

爲什麼你不在服務器端執行此操作？ – madalinivascu

@madalinivascu這是一個客戶端規範。 XX根據用戶在前端的輸入而改變。在選擇下拉菜單中最多可以有幾百個選項。阿賈克斯往返肯定會非常緩慢。我甚至不確定我能夠在前端足夠快地完成它。它可以在服務器端完成，但它沒有任何意義，只需要更長的時間。 – rwkiii

請嘗試以下頁面加載，循環之後克隆的選擇和基於克隆元素的值在頁面元素的文字更改爲所需的文本

$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/

來源

2016-07-26 06:32:15 madalinivascu

這是非常有用的，除了我可以依賴的唯一佔位符是'XX'（大寫btw）。連字符不可預測或不應被視爲可預測。此外，文本第一次更改後，XX不再可用 - 下次單擊單選按鈕時需要再次更改。這就是爲什麼我在_savedSelect中保存初始狀態的原因 - 它將包含列表和所有型號以及'XX'佔位符。 – rwkiii

如果這是我的選擇，我會命名緊湊，一切都將是可以預測的。但這不是我的選擇。我被要求讓它工作。：P – rwkiii

你想要這樣的https://jsfiddle.net/egu3wo8k/1/？ – madalinivascu

如何更改全部<option> SelectPicker中的文本

回答

相關問題