jQuery select onChange 更新输入字段值

Question

我在一种表单中有多组select和input，我需要根据所选值更新每个输入。根据选择下拉列表更新输入字段中的价格。

该下拉列表带有一个值和一个数据属性。value 是数量，data-attr 是价格。

因此，当您<1>从下拉列表中选择时，输入将更改<1> *为其数据属性。

我不想使用 ID、类或名称来获取当前的 onChange。

// jQuery onChange 这个特定的 {select_drop_down}

<select class="select">
    <option value="1" data-price="2.99">1</option>
    <option value="2" data-price="2.99">2</option>
    <option value="3" data-price="2.99">3</option>
    <option value="4" data-price="2.99">4</option>
</select>

// 将此输入的值更新为 selected:index * data-price。// 新值：如果选择了选项 value=2，则将 input[type=text] 更改为新值。

<input type="text" value="2.99">

// 下一个 {select_drop_down} 也是如此

<select class="select">
    <option value="1" data-price="1.99">1</option>
    <option value="2" data-price="1.99">2</option>
    <option value="3" data-price="1.99">3</option>
    <option value="4" data-price="1.99">4</option>
</select>

<input type="text" value="1.99">

这就是我到目前为止所拥有的：

$(".select").change(function () {
    newPrice = 2.99; // I NEED HERE THE CURRENT data-price value;
    $(".one option:selected").each(function () {
        Price = newPrice*$(".unit").val();
    });
    $(this).nextAll('input').first().focus().val(Price.toFixed(2))
});

这有效，但仅适用于第一个下拉菜单，不适用于第二个下拉菜单。

Answer 1

在事件中change使用以下命令获取当前选定的选项：

var newPrice = $(this).children(':selected').data('price');

以下代码片段仅打印所选值并使用将该值设置newPrice为下一个字段。input$(this).next('input').focus().val(newPrice);

现在您可以使用该值执行任何逻辑。

var newPrice = $(this).children(':selected').data('price');

$(".select").change(function () {
    newPrice = $(this).children(':selected').data('price');
    console.log(newPrice);
    /*
    $(".one option:selected").each(function () {
        Price = newPrice*$(".unit").val();
    });*/
    
    $(this).next('input').focus().val(newPrice);    
});