Question

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

我的问题是“如何进行此计算并在动态创建的文本框中显示其结果？”。（请在下面运行我的代码）。简单地说，我正在实施“从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

Answer 1

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

Answer 2

工作演示：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>

如何使用jquery参考多选下拉列表和文本框来计算值

2 个答案: