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正在寻找select的值：

$(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-*属性。

最后，使用select时无需包含标记名称（例如id）。 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')

获取属性价格

＆＃13;

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

＆＃13;

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

＆＃13;

添加属性到选择选项以提取其他数据

2 个答案: