Wrap last part of text inside option with span

Question

I need a little bit of your help. I have products in an online-shop with different options (different size, different color, ...). I made a fiddle as an example:

https://jsfiddle.net/04wbfL28/2/

My HTML looks like this:

    <div id="WA_price">
    <p class="WA_price2">200&nbsp;€</p>
</div>
<div class="product-options">
 <div class="input-box">
        <select name="super_attribute[149]" id="attribute149" class="required-entry super-attribute-select">
            <option value="0">Choose option…</option>
            <option value="28" price="339" data-label="1000 mm">1000 mm +339&nbsp;€</option>
            <option value="30" price="469" data-label="1200 mm" class="selected">1200 mm +469&nbsp;€</option>
            <option value="32" price="599" data-label="1400 mm">1400 mm +599&nbsp;€</option>
        </select>
    </div></div>

What I try to do is to change the color of the price in the dropdown field into red. I wanted to do this with a span that has an inline-style or gets a css class but couldn't find a solution. I also cant say "everything after mm gets a span wrap" because it is not always "mm" as a select option.

The only thing thats always the same is [price value] € for example 149 €. Do you guys have any idea how to wrap this with a span? Thanks in advance.

so there would be no possibility to change a certain part of the text in red, only everything or nothing? — Kesaja, Jul 13 '17 at 15:06
Use a select replacement script if you want more control over style — charlietfl, Jul 13 '17 at 15:25

score -1 · Answer 1 · answered Jul 13 '17 at 15:12

-1

The content permitted on option tag is text and escaped characters, not anything else. If you want to achieve this you should try to simulate the select behaviour. Try with a list. and you can use jQuery toggle() function to simulate the dropdown.

answered Jul 13 '17 at 15:12

Juan SA

297
2
7

Wrap last part of text inside option with span

1 Answers1