将属性添加到选择选项来提取额外的数据

Question

我有一个选择框，其中有一个对选项的值，我还希望基于选择的另一个值。

我的选择：

<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> 

我的javascript寻找的选择值：

$(document).on('click', 'button#top', function(e) { 
    e.preventDefault(); 
    var credits = $('select#credits').val(); 
    var value = $('select#credits').val($('option:selected').data('price')); 
}); 

此刻我得到的alert()是Object[Object]

任何人都可以告诉我我要去哪里？

Answer 1

val()只会得到（或设置）实际的value;从来没有price或任何其他属性。

如果您打算使用jQuery的data()方法，则需要使用data-*属性。

最后，当使用id时，不需要包含标签名称（例如select）。 id是独一无二的。

考虑到这一点：

$(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>

Answer 2

目标所选择的选项使用$('select#credits option:selected')，然后用得到的属性价格.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>