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

时间:2013-11-04 11:42:33

标签: javascript jquery html

所以,这就是我想要做的事情。

我有一个下拉列表,显示有多少不同的水果是值得的。 我想在Dropdown之前添加一个输入框,您可以在其中输入数值。 输入例如5后,从下拉表单中选择苹果,我希望结果是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>

1 个答案:

答案 0 :(得分: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());
});

Example fiddle