1

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

我有一个下拉列表，它显示一个水果有多少种不同的水果。我想在Dropdown之前添加一个输入框，可以在其中输入一个数值。在输入例如 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>
4

1 回答 1

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

示例小提琴

于 2013-11-04T11:48:10.047 回答