使用JavaScript乘以值，結果顯示在下拉列表

Question

所以，這就是我正在嘗試做的。

我有一個下拉列表，顯示了多少個不同的水果是一個值得的水果。 我想在下拉菜單之前添加一個輸入框，您可以在其中輸入數字值。 例如輸入5後，從下拉列表中選擇蘋果，我想要的結果是10個香蕉和15個桔子。

如何實現這一目標？

這活：

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

JS： $（文件）。就緒（函數（）{

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

Example fiddle