Jquery 根据选择框填充文本框值

Question

我有一个文本框，用于输入装有剩余化学品的桶的十进制重量。

<div class="form-group col-xs-12 col-sm-3">
     <div class="input-group ">
         <span class="input-group-addon white">Weight</span>
         <input class="form-control weight" type="text" />
     </div>
</div>

然后用户将 select 从 select 框中选择一个桶的大小。

<div class="form-group col-xs-12 col-sm-3">
    <div class="input-group ">
        <span class="input-group-addon white">Barrel Size</span>
        <select class="form-control gray" id="sizeSelect">
            <option value="defaultSelect" disabled selected>Select an option..</option>
            <option value="Small">Small</option>
            <option value="Medium">Medium</option>
            <option value="Large">Large</option>
        </select>
    </div>
</div>

每个桶尺寸都有固定的重量。小号 = 2.5 千克，中号 = 4.5 千克，大号 = 8.5 千克。然后我得到的是第三个文本框，我想在它减去桶重后显示化学重量。

<div class="form-group col-xs-12 col-sm-3">
    <div class="input-group ">
        <span class="input-group-addon white">Updated Weight</span>
        <input readonly class="form-control updatedWeight" style="color: #20c200" type="text" />
    </div>
</div>

我基本上是在尝试类似的东西：

$(document).ready(function() {

$('#sizeSelect').change(function() {
    var myText = $("#sizeSelect :selected").text();
    if (myText == 'Small') {
     //Something like:
       var sum = $('.weight').val() - 2.5;
       $('.updatedWeight').val() = sum;
    }
});

});

我是 jquery 的新手，有点迷茫。请任何提示表示赞赏。谢谢

Answer 1

使用$('.updatedWeight').val(sum);更改input

的值

Answer 2

应该可以用数据属性来设置每桶的重量，所以喜欢

<div class="form-group col-xs-12 col-sm-3">
    <div class="input-group ">
        <span class="input-group-addon white">Barrel Size</span>
        <select class="form-control gray" id="sizeSelect">
            <option value="defaultSelect" disabled selected>Select an option..</option>
            <option value="Small" data-weight=2.5>Small</option>
            <option value="Medium" data-weight=4.5>Medium</option>
            <option value="Large" data-weight=8.5>Large</option>
        </select>
    </div>
</div>

然后你可以执行以下代码

$(document).ready(function() {

    $('#sizeSelect').change(function() {
        var newWeight = $("#weight").val() - $("#sizeSelect:selected").data("weight");
        $('.updatedWeight').val(orgWeight)
    });
    $('#weight').change(function() {
        var newWeight = $("#weight").val() - $("#sizeSelect:selected").data("weight");
        $('.updatedWeight').val(orgWeight)
    });
});

每次更新权重输入或 sizeSelect 时更新 updatedWeight 中的值。此外，将权重输入更改为具有 id 而不是 class.

Jquery 根据选择框填充文本框值

Jquery populate text box value based on selectbox

javascript

c#

jquery

razor