javascript - PHP + Jquery 根据两个 Dropdown 更改 Textbox 的值

Question

我尝试根据 2 下拉列表更新文本框值。 1 个下拉列表包含价格 1，其他下拉列表包含价格 2，现在我希望当用户从两个下拉列表中选择价格时，文本框显示如下“价格 1 + 价格 2 = 总计” 我如何调整两个值在单个文本框值中？我的价格来自数据库。这是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()));
});

SECOND DEMO