將屬性添加到選擇選項來提取額外的數據

我有一個選擇框，其中有一個對選項的值，我還希望基於選擇的另一個值。將屬性添加到選擇選項來提取額外的數據

我的選擇：

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

任何人都可以告訴我我要去哪裏？

來源

2015-10-13 Dev.Wol

您是否嘗試過使用Jquery的.attr（）方法而不是數據？ http://api.jquery.com/attr/ – Sean

此外，你想改變選定的選項文本，或只是爲了獲得價值？ – sinisake

很難告訴你想要達到的目標，但是因爲你使用'.data（'price'）'我會說你最好把'price = ...'改成'data-price = ...'。 – haim770

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>

來源

2015-10-13 17:09:34

目標所選擇的選項使用$('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>

來源

2015-10-13 17:11:47 indubitablee

將屬性添加到選擇選項來提取額外的數據

回答

相關問題