CODEWITHSUNDEEP
javascripthtmljqueryhtml-select
Ezio Auditore
Ezio Auditore

Reputation: 169

How can i add text on option text without remove values?

I'm facing issues trying to add some text without changing values on option selection.

Could you please help me to face this issue?

I have this HTML CODE

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

I'm trying to add text to text options without removing the value.

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

I tried this Jquery code:

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

Also tried this Jquery code:

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

Upvotes: 0

Views: 90

Answers (2)

Aftab Mondal
Aftab Mondal

Reputation: 11

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

Upvotes: 1

User863
User863

Reputation: 20039

Using 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>

Upvotes: 1

Related Questions