I have a select box to which I have a value against the options, I also want another value based on the selection.
My select:
<select class="form-control input-lg" id="credits">
<option value="1" price="2">1 Credit</option>
<option value="10" price="4">10 Credits</option>
<option value="25" price="6">25 Credits</option>
<option value="50" price="8">50 Credits</option>
<option value="100" price="10">100 Credits</option>
<option value="200" price="12">200 Credits</option>
</select>
<button id="top">Apply</button>
My Javascript looking for the value of select:
$(document).on('click', 'button#top', function(e) {
e.preventDefault();
var credits = $('select#credits').val();
var value = $('select#credits').val($('option:selected').data('price'));
});
At the moment all I get on alert()
is Object[Object]
Can anyone tell me where I'm going wrong?
val()
will only get (or set) the actual value
; never price
or any other attribute.
And if you're going to use jQuery's data()
method, you need to use data-*
attributes.
Finally, there's no need to include the tag name (eg select
) when using an id
. id
s are unique.
With that in mind:
$(document).on('click', '#top', function(e) { e.preventDefault(); var credits = $('#credits').val(); // the + makes sure we get a numeric value var value = + $('#credits option:selected').data('price'); console.log(value); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select class="form-control input-lg" id="credits"> <option value="1" data-price="2">1 Credit</option> <option value="10" data-price="4">10 Credits</option> <option value="25" data-price="6">25 Credits</option> <option value="50" data-price="8">50 Credits</option> <option value="100" data-price="10">100 Credits</option> <option value="200" data-price="12">200 Credits</option> </select> <button id="top">Apply</button>
target the selected option using $('select#credits option:selected')
and then get the attribute price using .attr('price')
$(document).on('click', 'button#top', function(e) { e.preventDefault(); var credits = $('select#credits').val(); var value = $('select#credits option:selected').attr('price'); alert(value); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="form-control input-lg" id="credits"> <option value="1" price="2">1 Credit</option> <option value="10" price="4">10 Credits</option> <option value="25" price="6">25 Credits</option> <option value="50" price="8">50 Credits</option> <option value="100" price="10">100 Credits</option> <option value="200" price="12">200 Credits</option> </select> <button id="top">Apply</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.