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())
    });
});

以下是FIDDLE

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

3 个答案: