使用javascript乘以值，结果显示在下拉列表中

Question

所以，这就是我想要做的。

我有一个下拉列表，其中显示了一个水果值多少个不同的水果。 我想在下拉菜单之前添加一个输入框，您可以在其中输入数值。 输入示例5后，从下拉列表中选择Apples，我希望结果是10个香蕉和15个橙子。

如何实现呢？

这是现场直播：

http://jsfiddle.net/2A5Xx/1/

JS：$（document）.ready（function（）{

        function showTab( name ) 
        {
            name = '#' + name;

            $('div').not(name).hide();

            $(name).show();
        }

        $('#dropdown').change( function() {

            showTab( $( this ).val() );
        });

        showTab( $('#dropdown').val() );

    });

HTML：

<form>
              <p>I want to sell
                  <input type="text" value="Input number" maxlength="5">
        <select id="dropdown" name="dropdown">
            <option value="Select" selected="selected">Select a fruit</option>
            <option value="Apple">Apple</option>
            <option value="Banana">Banana</option>
            <option value="Orange">Orange</option>
            <option value="Pineapple">Pineapple</option>
            <option value="Watermelon">Watermelon</option>
        </select>
    </p>
</form>
<div id="Apple">
    <ul>
        <li>2 bananas</li>
        <li>3 oranges</li>
    </ul>
</div>
<div id="Banana">
    <ul>
        <li>2 apples</li>
        <li>4 oranges</li>
    </ul>'</div>
<div id="Orange">
    <ul>
        <li>1 pineapple</li>
        <li>5 watermelons</li>
    </ul>
</div>
<div id="Pineapple">
    <ul>
        <li>2 oranges</li>
        <li>3 bananas</li>
    </ul>
</div>
<div id="Watermelon">
    <ul>
        <li>2 pineapples</li>
        <li>1 banana</li>
    </ul>
</div>

Answer 1

首先，您需要修改HTML，以便您有一个元素来放置数量及其默认单位：

<div id="Apple">
    <ul>
        <li><span data-val="2"></span> bananas</li>
        <li><span data-val="3"></span> oranges</li>
    </ul>
</div>

然后在您的JS中，您需要获取该数字并将其乘以输入的值：

$(document).ready(function () {
    function showTab(name) {
        $('div').hide();
        var $div = $('#' + name).show();
        var number = parseInt($('.number').val(), 0);
        $('span', $div).each(function() {
            $(this).text($(this).data('val') * number);
        });
    }

    $('#dropdown').change(function () {
        showTab($(this).val());
    });

    showTab($('#dropdown').val());
});

小提琴的例子