CODEWITHSUNDEEP
javascripthtmlarrays
Col ᴸᴬᴢᴬᴿᵁᴤ Smith
Col ᴸᴬᴢᴬᴿᵁᴤ Smith

Reputation: 49

Loop through all options in a selection and add the value to the option name

I have a selection all with different values. What I want to do is loop through each option if the value contains the text "pa_course-date" and add it to the option name "Course Date"

So it reads "Course Date - pa_course-date-aromatherapy" and so on

I would not where to start with this one. If a javascript expert can take a look I will be very happy.

<option value="pa_course-date-aromatherapy">Course Date</option>
<option value="pa_course-date-basic-colouring">Course Date</option>
<option value="pa_course-date-body-wraps">Course Date</option>
<option value="pa_course-date-brow-tinting">Course Date</option>
<option value="pa_course-date-cold-fusion">Course Date</option>

Upvotes: 1

Views: 45

Answers (3)

Hamouda Arfaoui
Hamouda Arfaoui

Reputation: 70

This should work fine

$(document).ready(function(){
	$("#select>option").each(function(){
  	$(this).text(this.text + ' - ' + this.value)
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select">
  <option value="pa_course-date-aromatherapy">Course Date</option>
  <option value="pa_course-date-basic-colouring">Course Date</option>
  <option value="pa_course-date-body-wraps">Course Date</option>
  <option value="pa_course-date-brow-tinting">Course Date</option>
  <option value="pa_course-date-cold-fusion">Course Date</option>     
</select>

Upvotes: -1

user11638262
user11638262

Reputation:

Try this code inside a select, 

return valueList.map(v => {
    if(v === "pa_course-date") {
        return <option value={"Course Date" + v}>{"Course Date" + v}</option>
    }
})

Upvotes: 1

Nico Diz
Nico Diz

Reputation: 1504

Try this:

const options = document.querySelectorAll('.attribute_taxonomy option');

options.forEach(o => {
  const currentValue = o.getAttribute('value');
  o.innerHTML = `Course Date - ${currentValue}`;
});
<select name="attribute_taxonomy" class="attribute_taxonomy">

<option value="pa_course-date-aromatherapy">Course Date</option>
<option value="pa_course-date-basic-colouring">Course Date</option>
<option value="pa_course-date-body-wraps">Course Date</option>
<option value="pa_course-date-brow-tinting">Course Date</option>
<option value="pa_course-date-cold-fusion">Course Date</option>     

</select>

Upvotes: 2

Related Questions