根据两个下拉文本框的PHP + jQuery的变化值(PHP + Jquery Change Val

我尝试更新的文本框的值按2下拉。 1个下拉包含价格1和其它下拉含有价2，现在我想的是，当用户选择价格从两个下拉文本框然后显示这样的“ 价格1 + price2 =总 ”我怎样才能在玛吉单个文本框的值都值？我的价格来自于数据库中。这里是FIDDLE

PHP代码

 <div class="three columns">
                    <div class="picker">
                        <select name="city" required>
                        <option value="" disabled>Select</option>
                            <?php 
                            $result = mysqli_query($con,"SELECT * FROM area");
                            while($row = mysqli_fetch_array($result))
                            {
                            ?>
                                <option value="New"><?php echo $row['city']."( $ ".$row['area'].")";; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                </div>
                <div class="four columns">
                <div class="picker">
                    <select name="position" required>

                        <?php 
                            $result = mysqli_query($con,"SELECT * FROM pricing");
                            while($row = mysqli_fetch_array($result))
                        {
                        ?>
                            <option value="<?php echo $row['position']; ?>"><?php echo $row['position']."( $ ".$row['price'].")"; ?></option>
                        <?php } ?>
                    </select>
                </div>
            </div>
            <div class="row">
            <div class="two columns">
                Total
            </div>
            <div class="ten columns">
                <div class="field">
                  <input class="input" type="total" id="total" placeholder="" name="total" disabled/>
                </div>
            </div>

        </div>

Answer 1:

加上这两个组合的一类，写一个事件是这样的：

$('.combo').change(function() {
    $('#firstvalue').val(parseInt($('#combo').val()) +parseInt($('#combo1').val()));
});

FIDDLE DEMO

或者你可以做到这一点的方法：

$('.combo').change(function() {
    $('#firstvalue').val($('#combo').val() +"+"+$('#combo1').val()+"=");
    $('#firstvalue1').val(parseInt($('#combo').val()) +parseInt($('#combo1').val()));
});

第二个演示

Answer 2:

用这个..

$(document).ready(function() {

$('.combo').change(function() {
    $('#firstvalue').val(parseInt($('#combo').val()) +parseInt($('#combo1').val()));
});


$('#combo1').change(function() {
    $('#firstvalue1').val($('#combo1').val());
});
});

Answer 3:

你可以通过使用变量做到这一点：

如果你想总结的两个下拉选项，那么你必须给seond下拉不是字符串的整数值（如A3，A4应该是3,4）。看到演示的HTML。

 $(document).ready(function() {
    price1=0;
    price2 =0;
    $('#combo').change(function() {
          price1= this.value;
          $('#firstvalue').val(parseInt(price1)+parseInt(price2));

    });


  $('#combo1').change(function() {
    price2 = this.value;
    $('#firstvalue').val(parseInt(price1)+parseInt(price2));
  });
});