Question

我有两个选择列表和一些产品，当我选择一个产品时，我希望输入字段以相应的价格更新

<select name="sweets" id="variant1" rel="price1">
    <option rel="10">food1</option>
    <option rel="20">food2</option>
</select>
<input type="text" rel="price1"></input>

<select name="sweets" id="variant1" rel="price2">
    <option rel="10">drink1</option>
    <option rel="20">drink2</option>
</select>

我试图用jQuery做这个，我做这样的事情

$("select").change(function () {
      var str = "";
      $("select option:selected").each(function () {
            str += $(this).attr('rel');
          });

      var TEST = $(this).attr("rel");   
      $("input[rel="+TEST+"]").val(str);
    }).change();

问题是，它更新了两个字段：S 所有帮助都是apriciated

Answer 1

两个select元素都有相同的id。首先给每个人一个唯一的身份。

你可以试试这个，但它只会查找下一个文本框元素并设置所选的值。

 $("select").change(function () {
       $(this).next("input[rel="+$(this).attr("rel")+"]").val($(this).val());
    }).change();

Answer 2

您在这两个选项上都拥有相同的ID。将你的第二个改为id =“variant2”

$("select option").change(function () {
      $('input[type="text"][rel="'+$(this).attr("rel")+'"]').val($(this).attr("rel"));
});

Answer 3

<select rel="price1">
    <option rel="10">food1</option>
    <option rel="20">food2</option>
</select>
<input type="text" rel="price1"></input>

<select rel="price2">
    <option rel="10">drink1</option>
    <option rel="20">drink2</option>
</select>
<input type="text" rel="price2"></input>

$('select').change(function(){
    var $this = $(this);
    var $correspondingInput = $('input[rel=' + $this.attr('rel') + ']');
    var selectedValue = $this.find('option:selected').attr('rel');
    $correspondingInput.val(selectedValue);
});

Answer 4

正如已经指出的那样，当value属性专门用于此目的时，你真的不需要使用rel属性。

另请注意，您在多个位置的网页上使用相同的ID。 ID是唯一标识符。

从您的问题来看并不完全清楚但是我认为您要做的是获取在多个选择列表中选择的每个产品的价格并将它们加在一起以获得运行总计。

这是一个可以证明这一点的工作版本：http://jsfiddle.net/3BF2H/

<强> JS

$("select").change(function(){
    var total = 0;

    $("select option:selected").each(function(){
         total += parseInt($(this).val());
        }
    );

    $('#sumOfProducts').val(total)
});

<强> HTML

<select id="food">
    <option value="10">Burger</option>
    <option value="7">Hot Dog</option>
</select>

<select id="drink">
    <option value="5">Coke</option>
    <option value="3">Pepsi</option>
</select>

<input type="text" id="sumOfProducts" />

Answer 5

没有rel。匹配选择列表，以防您有其他人不应遵循此行为。

$("select[name^=list]").change(function (event) {
    var me = $(this);
    var str = "";
    $("option:selected", me).each(function () {
        str += me.val();
    });
    var index = me.attr('name').match(/.*?([0-9]+)/)[1];
    $('input[name=price' + index + ']').val(str);
});

<select name="list1">
    <option value="10">food1</option>
    <option value="20">food2</option>
</select>
<input type="text" name="price1" />
<select name="list2">
    <option value="10">drink1</option>
    <option value="20">drink2</option>
</select>
<input type="text" name="price2" />

jQuery：两个必须更新两个单独字段的选择列表

5 个答案: