How To Calculate Values With The Refrence To Multi Select Drop Down And Textbox Using Jquery

I have a html form having- 1 multi select dropdown :Where users select the name_of_employee. 1 Textbox : Where users enter the Total

Solution 1:

Working Demo : 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>

Solution 2:

I wont generate the whole code for you, but I can give you some tips, basically, with jquery, you'd do something like this.

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

If I've helped you start this in any way, please be sure to vote it up :) if you want to call the function, just use calculator(); on the onclick event of a button.