Как я могу добавить текст в текст опции без удаления значений?

Question

У меня возникают проблемы при попытке добавить текст без изменения значений при выборе параметров.

Не могли бы вы помочь мне решить эту проблему?

У меня есть этот HTML-код

<select id="q_c_0_a_0_name">
 <option value="name">     Name</option>
 <option value="lastanem1">First Lastname</option>
 <option value="lastname2">Second Lastname</option>
 ...
 <option value="xxxxxxxxx">Other value</option>
</select>

Я пытаюсь добавить текст в параметры текста без удаления значения.

<select id="q_c_0_a_0_name">
 <option value="name">     Filter by Name</option>
 <option value="lastanem1">Filter by First Lastname</option>
 <option value="lastname2">Filter by Second Lastname</option>
 ...
 <option value="xxxxxxxxx">Filter by Other value</option>
</select>

Я пробовал этот код Jquery:

$(function(){
  $("#q_c_0_a_0_name option[value=cont]").textContent  += "Filter by";
});  

Также пробовал этот код Jquery:

$(function(){
  $("#q_c_0_a_0_name option[value]").textContent  += "Filter by";
});  

Answer 1

<select id="q_c_0_a_0_name">
    <option value="name">Name</option>
    <option value="lastanem1">First Lastname</option>
    <option value="lastname2">Second Lastname</option>
    <option value="xxxxxxxxx">Other value</option>
</select>

<script>
    $('#q_c_0_a_0_name').find($('option').prepend('Filter By '));
</script>

Answer 2

Использование text()

$("#q_c_0_a_0_name option").text(function() {
  return "Filter by " + $(this).text()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="q_c_0_a_0_name">
  <option value="name"> Name</option>
  <option value="lastanem1">First Lastname</option>
  <option value="lastname2">Second Lastname</option>
  <option value="xxxxxxxxx">Other value</option>
</select>