-3

次のようなドロップダウンメニューがあります

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

ユーザーが上記のいずれかを選択すると、ドロップダウンの下にDIVが必要になり、選択したときの価格が表示されます。どんな助けでも素晴らしいでしょう。jsfiddle。

4

3 に答える 3

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属性を削除したことに注意してください。デフォルトではオプションのテキストになっているため、2回配置するのは冗長でした。

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

于 2012-09-10T21:38:56.130 に答える
0

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-10T21:56:51.247 に答える
0

これを試して

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

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

これがフィドルです

于 2012-09-10T22:03:12.977 に答える