2012-09-14 81 views
1

我有一個html表格 -
1多選下拉菜單:用戶選擇name_of_employee。
1文本框:用戶輸入總價格。
在文本框中輸入總價後,應該發生一個小的計算,其結果應顯示在第三個動態生成的文本框中。
計算將是:
結果= {total_price_entered_in_textbox/total_option_selected_from_Selectbox}如何計算值與多選擇下拉列表和文本框使用jquery

我的問題是,「我怎麼可以這樣計算並顯示其在動態創建的文本結果?」。 (請在下面運行我的代碼)。 簡而言之,我正在實施「從Multiselect下拉菜單中將所有選定員工的所有員工的平等部分潛水總額」。

      <!DOCTYPE html> 
      <html> 
      <head> 
       <style>#multiple{ 
       margin-bottom:10px; 
       border:1px solid #333; 
       background:#efefef; 
       color:#000; 
      } 
      #result input{ 
       margin-left:5px; 
       border:1px solid #333; 
       background:#a4c4f4; 
       margin-top:5px; 
      } 
       </style> 
       <script src="http://code.jquery.com/jquery-latest.js"></script> 
      </head> 
      <body align="center"> 
      <form id="frm"> 
       <select id="multiple" multiple="multiple" style="width: 120px;height: 120px;"> 
       <option value="1" > 
        Ashutosh 
       </option> 
       <option value="6"> 
        Jems Bond 
       </option> 
       <option value="7"> 
        Danial Crack 
       </option> 
       <option value="8"> 
        Dan Brown 
       </option> 
       <option value="9"> 
        Angilina Jolly 
       </option> 
       </select> 
       <br/> 
       <input type="text" id="target" name="total_price" size="13" id="" style="background-color:orange;font-size: 22px;color: blue"/> <!--User will enter the total_price in this textbox --> 
       <div id="result"> 
       </div> 
      </form> 
      <script> 
       $(function() 
      { 



       $("#multiple").change(function() 
       { 
        var multipleValues = $("#multiple").val() || ""; 
        var result = ""; 
        if (multipleValues != "") { 
         var aVal = multipleValues.toString().split(","); 
         var count = $("#multiple :selected").length; 

          $('#target').keyup(function() 
           { 
            var price = $(this).val(); 
            var price_per_head= price/count ; 
            alert("result="+price_per_head) 
           }); 

         $.each(aVal, function(i, value) { 
          result += "<div>"; 
          result += "<input type='text' name='opval" + (parseInt(i) + 1) + "' value='" + value.trim() + "'>"; 
          result += "<input type='text' name='optext" + (parseInt(i) + 1) + "' value='" + $("#multiple").find("option[value=" + value + "]").text().trim() + "'>"; 
          result += "<input type='text' name='option" + (parseInt(i) + 1) + "' value='' '>"; 
          result += "</div>"; 



         }); 
        } 
        //Set Result 
        $("#result").html(result); 

       }); 
      }); 



      calculator = function() 
      { 
           //I would select it by once the user has selected it, add a active class to it 
           var firstDropdown = $('#drop.active') .val(), 
            price = $('textarea').val(), 
            result = firstDropdown/price; 

           //I'd then have a container that would hold the dynamic textarea 
           $('#container').html('<textarea class="eval">' + result + '</textarea>') 
      }; 


      </script> 
      </body> 
      </html> 

希望有人能幫助我。

感謝你 -Ashutosh

回答

0

工作演示:http://codebins.com/bin/4ldqp7a/2

JS

$(function() { 
       $("#multiple").change(function() { 
        var multipleValues = $("#multiple").val() || ""; 
        var result = ""; 
        if (multipleValues != "") { 
         var aVal = multipleValues.toString().split(","); 
         var count = $("#multiple :selected").length; 
         $.each(aVal, function(i, value) { 
          result += "<div>"; 
          result += "<input type='text' name='opval" + (parseInt(i) + 1) + "' value='" + value.trim() + "'>"; 
          result += "<input type='text' name='optext" + (parseInt(i) + 1) + "' value='" + $("#multiple").find("option[value=" + value + "]").text().trim() + "'>"; 
          result += "<input type='text' name='option" + (parseInt(i) + 1) + "' value='' '>";//result should display in this textbox .i.e (result= total_price/count) 
          result += "</div>"; 
           alert("Number of selected Names="+count); 
         }); 
        } 
        //Set Result 
        $("#result").html(result); 

       }); 

    $("#toal_price").blur(function(){ 
     var multipleValues = $("#multiple").val() || ""; 
     var total_price = $("#toal_price").val(); 
     var aVal = multipleValues.toString().split(","); 
     var count = $("#multiple :selected").length; 
     if (multipleValues != "") { 
      $.each(aVal, function(i, value) { 
      var price = total_price/count; 
      $("input[name=option"+(parseInt(i) + 1)+"]").val(price); 
      }); 
     } 

    }); 
}); 

HTML

<form id="frm"> 
       <select id="multiple" multiple="multiple" style="width: 120px;height: 120px;"> 
       <option value="1" > 
        Ashutosh 
       </option> 
       <option value="6"> 
        Jems Bond 
       </option> 
       <option value="7"> 
        Danial Crack 
       </option> 
       <option value="8"> 
        Dan Brown 
       </option> 
       <option value="9"> 
        Angilina Jolly 
       </option> 
       </select> 
       <br/> 
       <input type="text" id="toal_price" name="total_price" size="13" id="" style="background-color:orange;font-size: 22px;color: blue"/> <!--User will enter the total_price in this textbox --> 
       <div id="result"> 
       </div> 
      </form> 
+0

謝謝先生。現在我非常感興趣學習Jquery。 –

+0

出現了一個新的疑問。我想對生成的文本框進行動態驗證。這樣,所有動態生成的文本框的總和應該等於total_price(靜態文本框)的值。 –

+0

我在這裏發佈了我的新疑問。 http://stackoverflow.com/questions/12471823/how-to-validate-dynamically-generated-textbox-with-reference-to-another-textbox請幫我先生。 –

0

我不會爲你生成整個代碼,但我可以給你一些提示,基本上,使用jQuery,你會做這樣的事情。

calculator = function(){ 
    //I would select it by once the user has selected it, add a active class to it 
    var firstDropdown = $('#drop.active') .val(), 
     price = $('textarea').val(), 
     result = firstDropdown/price; 

    //I'd then have a container that would hold the dynamic textarea 
    $('#container').html('<textarea class="eval">' + result + '</textarea>') 
}; 

如果我幫助你以任何方式啓動這個,請一定要投上一票:)如果你要調用的函數,只需使用計算器();在按鈕的onclick事件上。

+0

我已經生成動態文本框(請運行我上面的html代碼,你就會明白我確切的問題)。我想在第三個文本框(動態生成的文本框)中顯示結果。結果將會是(值輸入文本框/計數) –

相關問題