JQuery: два списка выбора, которые должны обновить два отдельных поля

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 Вся помощь сокращается

Answer 1

У вас одинаковый идентификатор для обоих выбранных элементов.Прежде всего, присвойте каждому из них уникальный идентификатор.

Вы можете попробовать это, хотя при этом будет искать только следующий элемент текстового поля и устанавливается выбранное значение.

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

Answer 2

нет отн.соответствует спискам выбора в случае, если у вас есть другие, которые не должны следовать этому поведению.

$("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" />

Answer 3

Как уже отмечалось, вам действительно не нужно использовать атрибут rel, когда атрибут value предназначен именно для этой цели.

Также обратите внимание, что вы используете один и тот же идентификатор на странице в нескольких местах. Идентификаторы являются уникальными идентификаторами.

Это не совсем ясно из вашего вопроса, однако я думаю, что вы пытаетесь сделать, это получить цену каждого продукта, выбранного в нескольких списках выбора, и сложить их вместе, чтобы получить промежуточный итог.

Вот рабочая версия, демонстрирующая это: 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 4

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

у вас одинаковый идентификатор на обоих этих селектах. измени свою секунду на id = "option2"

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