如何顯示下拉菜單的價格在一個DIV

-3

<option value="Small">small</option> 
<option value="Medium">medium</option> 
<option value="Large">large</option>

當用戶選擇上述欲下拉到低於DIV中的一個表示價格選擇時。任何幫助都會很棒。的jsfiddle。

來源

2012-09-10 Steph

需要Javascript的那種事。我們不會爲你寫信，但如果你顯示你至少已經嘗試過，我們會盡力幫助解決它。 –

如果我從哪裏開始我會嘗試它，但我不知道爲什麼我要問 – Steph

價格從哪裏來？ –

有很多方法可以做到這一點。你可以有一個數據屬性的價格，然後把它放在DIV：

<select onChange="document.getElementById('price').firstChild.nodeValue 
        =this.options[this.selectedIndex].getAttribute('data-price');"> 
    <option data-price="$3.00">Small</option> 
    <option data-price="$3.50">Medium</option> 
    <option data-price="$4.00">Large</option> 
</select> 
<div id="price">$3.00</div>

注意，我刪除了value屬性。它默認爲選項的文本，所以在那裏放兩次是多餘的。

的jsfiddle：http://jsfiddle.net/iambriansreed/TpXAa/

來源

2012-09-10 21:38:56

+1我也加了小提琴。 – iambriansreed

真棒，非常感謝。我喜歡上面的直接答案。 – Steph

我很驚訝我沒有得到一打downvotes的原因，如「使用內聯事件處理程序」和「不使用jQuery」。因爲，當然，[jQuery是所有事情的答案]（http://meta.stackexchange.com/a/19492/178220） –

好像你需要使用jQuery。

我會去與

$(document).ready(function() { 
    $('.group').hide(); 
    $('#option1').show(); 
    $('#selectMe').change(function() { 
     $('.group').hide(); 
     $('#'+$(this).val()).show(); 
    }) 
}); 


<select id="selectMe"> 
    <option value="option1">option1</option> 
    <option value="option2">option2</option> 
    <option value="option3">option3</option> 
    <option value="option4">option4</option> 
</select> 
<div id="option1" class="group">$ 0</div> 
<div id="option2" class="group">$ 10</div> 
<div id="option3" class="group">$ 20</div> 
<div id="option4" class="group">$ 50</div>

來源

2012-09-10 21:56:51

試試這個

$(function() { 
    $('#lbl').text($('#select1').val()) 

    $('#select1').on('change', function() { 
     $('#lbl').text($(this).val()) 
    }); 
});

這裏是FIDDLE

來源

2012-09-10 22:03:12

如何顯示下拉菜單的價格在一個DIV

回答

相關問題