时间戳

首页 > 解决方案 > jQuery根据选择框填充文本框值

javascript - jQuery根据选择框填充文本框值

问题描述

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

<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>

然后，用户将从选择框中选择一个选项，说明它是什么尺寸的枪管。

<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 的新手，所以我有点迷茫。请任何提示表示赞赏。谢谢

标签： javascriptc#jqueryrazor

解决方案

应该可以使用数据属性来设置每桶的重量，比如

<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 而不是类。

推荐阅读