Using jQuery or Javascript to find dropdown option value

Question

I am dynamically generating a dropdown list on the page when a user loads it. I'd like to get the value of the dropdown using jquery or javascript.

The tricky part is that the dropdown will have a value as such: "I love Rabbits ($19.95)"

I want to get the value of the dropdown and then isolate the value inside of the brackets. Any ideas?

Cheers!

Answer 1

Getting the value is easy, use val() . That will be a string.

Then you just grab the value with a regex , probably with a capture group; for instance:

var value, m, innerValue;
value = $("selector for select box").val();
m = /\(([^)]+)/.exec(value);
if (m) {
    innerValue = m[1];
}

That regex says: "Find a ( and then capture everything following it that isn't a ) ". Then we take the value of the capture group.

Answer 2

Could you not have your select in the following format:

<select name="opinions_price">
<option value="19.45">I love rabbits (£19.45)</option>
<option value="12.45">I hate parakeets (£12.45)</option>
<option value="3.24">I am indifferent to possums (£3.24)</option>
</select>

Then simply do:

var price = $('select option:selected').val();

If you want to use the data attributes instead (assume the select is in a loop, you know how to do that):

<select name="opinions_price">
<?php foreach($things as $thing) { ?>
<option data-price="<?php echo $thing['price']; ?>" data-id="<?php echo $thing['id']; ?>">[..]</option>
<?php } ?>
</select>

Then simply do:

var price = $('select option:selected').data('price');
var id = $('select option:selected').data('id');

Saves a (possibly) expensive Regex?