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

Posted 2023-04-13

【中文标题】jQuery根据选择框填充文本框值

【英文标题】：Jquery populate text box value based on selectbox

【发布时间】：2021-08-20 13:10:12

【问题描述】：

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

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

【问题讨论】：

我相信使用 JQuery 设置一个值，您将值传递给 val() 函数，例如：...val(sum);。我不确定您可能还有什么其他问题。

【参考方案1】：

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

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

【参考方案2】：

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