CODEWITHSUNDEEP
javascriptjqueryselecthide
Alex Murphy
Alex Murphy

Reputation: 5

Hiding select text with js

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

Upvotes: 0

Views: 120

Answers (2)

j08691
j08691

Reputation: 208040

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]) );
});

Upvotes: 3

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

Assign an ID to the Select and then the following in a Script block:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#input_33").each(function () {
            $('option', this).each(function () {
                var option = this;
                var space = option.text.indexOf(" ");
                if (space > -1) {
                    option.text = option.text.substring(0,space);
                }

            })

        });
    });
</script>

EDIT: As you can see what I do is to find the space in each option item, and then cut the string where it find the space. It will make "Please Select" read "Please" but you get the drift.

Good luck!

Upvotes: 0

Related Questions