1

我有一个 html 表单，其中包含
1 个多选下拉列表：用户在其中选择 name_of_employee。
1 文本框：用户输入总价的地方。
在文本框中输入总价后，应该进行一个小计算，其结果应该显示在第三个动态生成的文本框中。
计算将是：
result={ total_price_entered_in_textbox / total_option_selected_from_Selectbox}

我的问题是“我如何进行此计算并在动态创建的文本框中显示其结果？ ”。（请在下面运行我的代码）。简而言之，我正在实施“从多选下拉列表中将相等部分的总金额分配给所有选定的员工。”

                            <!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

4

2 回答 2

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

如果我以任何方式帮助你开始了这个，请务必投票 :) 如果你想调用该函数，只需使用calculator(); 在按钮的 onclick 事件上。

于 2012-09-14T09:26:30.450 回答
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>
于 2012-09-14T10:41:35.877 回答