jQuery select and filter contents of <option>

Question

Hi,

I have the following drop down menu:

<select id="target">
    <option value="0">Zero ($123.45)</option>
    <option value="1">One ($99.99)</option>
    <option value="2">Two ($4.50)</option>
</select>

Using jQuery, how can I select the contents of the selected option's () brackets, i.e. 123.45, 99.99 or 4.50?

So far I have:

$("select#target option:selected").contents();

That just gives Zero ($123.45) or equivalent though. How can I filter it further to get the number I'm looking for?

Thanks in advance.

Answer 1

Try:

var a = $("select#target option:selected").contents();
var bracketed = a.replace(/\(([^)]*)\)/g, "$1");

Or, if you don't want to use a regex:

var a = $("select#target option:selected").contents();
var bracketed = a.split('(')[1].split(')')[0];

Answer 2

I think that the most idiomatic way to do this with jQuery is

$("#target :selected").text().match(/\((.+)\)/).pop()

Regular expressions are usually the best way to match text in Javascript, and this style of code conforms to the usual jQuery method chaining style, doesn't introduce any superfluous local variables, and doesn't include an ugly index dereferencing operation. I've also written the selector in more compact form.

Answer 3

You could also just use those dollar values as the value attribute for each:

<option value="$123.45">Zero ($123.45)</option>
    etc...

then use this jQuery to get it:

var a = $('select#target option:selected').attr('value');