如何使用jquery计算多选下拉和文本框的参考值答案

【问题标题】：how to calculate values with the refrence to multi select drop down and textbox using jquery如何使用jquery计算多选下拉和文本框的参考值
【发布时间】：2012-09-14 08:53:59
【问题描述】：

我有一个 html 表单-
1 多选下拉菜单：用户在其中选择 name_of_employee。
1 个文本框：用户输入总价的位置。
在文本框中输入总价后，应进行一次小计算，其结果应显示在第三个动态生成的文本框中。
计算将是：
结果={ 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

【问题讨论】：

标签： jquery html

【解决方案1】：

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

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

【讨论】：

出现了一个新的疑问。我想对生成的文本框进行动态验证。这样，所有动态生成的文本框的总和应该等于total_price(静态文本框)的值。
我在这里发布了我的新疑问。 stackoverflow.com/questions/12471823/…请帮帮我先生。
您要验证哪个事件？
我有一个小疑问：在上面的动态表格中填写完所有数据后，插入到Db中发生了。但是，当我单击“编辑”按钮时，我会选择上一个选择的选项，该选项应该向我显示这 3 个文本框中的动态值。但这并没有发生。我不知道为什么？但是，如果我再次手动选择它，那么它工作正常。（我正在使用这个表格codebins.com/bin/4ldqp7a/2)-same，就像你教我的那样
刚刚我解决了它。通过添加 .... }//设置 autoresult$("#autoresult").html(autoresult);}) .change(); ....在第一个函数的末尾。

【解决方案2】：

我不会为你生成整个代码，但我可以给你一些提示，基本上，使用 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 事件上。

【讨论】：

我已经生成了动态文本框。（请运行我上面的 html 代码，你会明白我的确切问题。）。我想在第三个文本框（动态生成的文本框）中显示结果。结果将是（在文本框中输入的值/计数）