Question

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

下拉列表包含值和数据属性。值是数量，data-attr是价格。

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

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

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

//将此输入值更新为所选：index * data-price。 //新值：如果选择了选项值= 2，则将输入[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);字段。

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

$(".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);    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select">
    <option value="1" data-price="1.99">1</option>
    <option value="2" data-price="2.99">2</option>
    <option value="3" data-price="3.99">3</option>
    <option value="4" data-price="4.99">4</option>
</select>

<input type="text" value="1.99">

jQuery选择onChange更新输入字段值

1 个答案: