简体   繁体   中英

Add attribute to Select Option to pull additional data

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM