css - 如何在 DIV 中显示下拉菜单的价格

Question

我有一个下拉菜单如下

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

当用户选择上述其中一项时，我希望下拉菜单下方有一个 DIV，它在选择时显示价格。任何帮助都会很棒。jsfiddle。

Answer 1

有很多方法可以做到这一点。您可以将价格放在数据属性中，然后将其放入 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/

Answer 2

看来您需要使用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>

Answer 3

尝试这个

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

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

这是小提琴