자바 스크립트를 사용하여 값을 곱하면, 결과는 드롭 다운으로 표시됩니다.

Question

그래서 여기에 내가하려는 일이 있습니다.

몇 가지 과일이 과일 값인지 보여주는 드롭 다운 목록이 있습니다. 숫자 값을 입력 할 수있는 드롭 다운 앞에 입력 상자를 추가하고 싶습니다. 예 5를 입력하고 드롭 다운 폼에서 사과를 선택한 후 10 개의 바나나와 15 개의 오렌지가되도록합니다.

어떻게해야합니까?

는 여기 라이브입니다 :

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

JS : $ (문서) .ready (함수() {

 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을 수정하여 퀀트를 배치 할 요소가 있어야합니다. 시달은, 자신의 기본 단위와 함께 : 당신의 JS에서 다음

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

, 당신이 그 번호를 잡고 입력 한 값을 곱해야합니다

$(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