Question

I have a select option like below. The values are created dynamically. Is there a way to hide the prices using js/jquery?

Keep in mind i can’t access the text, so i can’t wrap price in a span and set display:none

<label for="input_1_33">Condition</label>
<select tabindex="2" name="input_33">
<option value="Please Select|" price="">Please Select</option>
<option value="Poor|-5" price="-£ 5.00">Poor -£ 5.00</option>
<option value="Average|0" price="">Average</option>
<option value="Good|5" price="+£ 5.00">Good +£ 5.00</option>
<option value="Excellent|10" price="+£ 10.00">Excellent +£ 10.00</option>
</select>

So it looks like this:

<label for="input_1_33">Condition</label>
<select tabindex="2" name="input_33">
<option value="Please Select|" price="">Please Select</option>
<option value="Poor|-5" price="-£ 5.00">Poor</option>
<option value="Average|0" price="">Average</option>
<option value="Good|5" price="+£ 5.00">Good</option>
<option value="Excellent|10" price="+£ 10.00">Excellent</option>
</select>

Thanks in advance

Answer 1

Here’s an ultra-concise way to do what you need: jsFiddle

jQuery:

$('select[name="input_33"] option:gt(0)').each(function(){
    $(this).text( ($(this).text().split(' ')[0]) );
});