Question

我是jquery＆amp;的新手。 javascript，我有一个文本框值＆amp;一个选择框，当我在文本框中输入值时从selectbox选择值，我想在另一个文本框中显示两个值的乘法。我尝试使用它，但使用2个文本框。我想要一个选择框＆amp;一个文本框计算

HTML：

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label for="volume">Volume</label>
            <input type="text" class="form-control required" id="box1" name="box1" maxlength="128">
        </div>
    </div>

    <div class="col-md-6">
        <div class="form-group">
            <label for="paymentmod">Rate</label>
            <select class="form-control required" id="box2" name="box2">
            <option value="0">Select rate</option>
            <?php
            if(!empty($rate))
            {
                foreach ($rate as $pl)
                {
                    ?>
                    <option value="<?php echo $pl->Id ?>"><?php echo $pl->rate ?></option>
                    <?php
                }
            }
            ?>
        </select>
        </div>
    </div>
</div>

Javascript：

$('input[name="box2"]').keyup(function() {
    var a = $('input[name="box1"]').val();
    var b = $(this).val();
    $('input[name="box3"]').val(a * b);
});

Answer 1

请参阅下面的代码段。它经过测试并且工作正常。

我希望这会有所帮助： - ）

感谢

function Multiply() {
        var txtbox_Value = $("#txtBox").val();
        var selectBox_Value = $("#Select").val();

        if (selectBox_Value == "0") {
            alert("Select Valid Integer!");
        }
        else {
            var MultipliedValue = (txtbox_Value * selectBox_Value);
            $("#TotalValue").val(MultipliedValue);
        }
    }

.form-control
{
display: block;
    width: 50%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<label>Enter a Number</label>
    <input type="text" id="txtBox" class="form-control" />
<br/><br/>
    <select id="Select" onchange="Multiply()" class="form-control">
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
<br/><br/>
<label>Total Multiplied Value</label>
    <input type="text" id="TotalValue"  class="form-control"/>
</div>

Answer 2

向两个元素添加onchange侦听器并检查事件侦听器中的数值并更改第三个文本框的value属性

＆＃13;

function myFunction() {
  first = Number($('#val1').val());
  second = Number($('#mySelect').val());
  if(first && second && !isNaN(first) && !isNaN(second)){
    $('#val2').val(first * second);
  }
  else {
    $('#val2').val(0);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="val1" onchange="myFunction()">
<select id="mySelect" onchange="myFunction()">
  <option value="15">15
  <option value="25">25
  <option value="35">35
  <option value="45">45
</select>
<input id="val2" disabled>

＆＃13;

Answer 3

我们采用更简单的解决方案，希望有所帮助：

$(document).on('change keyup blur', "#box1, #box2", function() {
    var val1 = $("#box1").val()
    var val2 = $("#box2").val()
    var result = val1 * val2
    $("#box3").val(result)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <div class="form-group">
        <label for="rate">rate</label>
        <input type="number" class="form-control required" id="box1" name="box2" maxlength="128">
        <select class="form-control required" id="box2" name="box2">
                                        <option value="0" disabled selected>Select rate</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        </select>
    </div>
</div>

<div class="col-md-6">
    <div class="form-group">
        <label for="volume">Volume</label>
        <input type="text" class="form-control required" id="box3" name="box3" maxlength="128">
    </div>
</div>

Answer 4

尚未测试过。

<intput type="text" id="text1" value="1" />

<select id="select1">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

<intput type="text" id="text2" />

$(document).ready(function () {  
    // Text box 1 blur event
    $('#text1').on('blur', function () {
        MyMultiply();
    });

    // select1 change event
    $('#select1').on('change', function () {
        MyMultiply();
    });

   function MyMultiply() {
        var txtNum1 = parseInt($('#text1').val(), 10);
        var seleNum1 = parseInt($('#select1').val(), 10);
        $('#text2').val(txtNum1 * seleNum1);
    }
});

Answer 5

你可以这样做

$('select[name="dropdown"]').change(function(){
    var val1 = $("#txtbox1").val(); // textbox value
    var val2 = $(this).val(); // select box value
    var val3 = val1 * val2; // multiply both value
    $("#txtbox2").val(val3);
});

如何通过乘以一个选择框值和＆amp;来计算金额。 jquery中的一个文本框值onchange

5 个答案: