1


私は、ユーザーが name_of_employee を選択する 1 つの複数選択ドロップダウンを持つ html フォームを持っています。
1 テキストボックス : ユーザーが合計金額を入力する場所。
テキスト ボックスに合計金額を入力すると、小さな計算が 1 回行われ、その結果が動的に生成された 3 番目のテキスト ボックスに表示されます。
計算は次のようになります:
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>

誰かが私を助けてくれることを願っています。

ありがとう - アシュトッシュ

4

2 に答える 2

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 に答える
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 に答える