jQuery: Two select lists that have to update two seperate fields

Im hav开发者_高级运维ing two select lists with some products and when i choose a product i want an input field to get updated with a corosponding price

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

Im trying to do this with jQuery where i do somthing like this

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

Problem is, its updating both fields :S All help is apriciated

You have a same id for both the select elements. First of give a unique id to each of them.

You can try this though which will look for only the next text box element and set the selected value.

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

you have the same id on both of those selects. change your second to id="variant2"

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

As has been pointed out, you really don't need to be using the rel attribute when the value attribute is designed for exactly this purpose.

Also notice that you're using the same ID on a page in more than one location. ID's are unique identifiers.

It's not exactly clear from your question however I think what you're trying to do is get the price of each product selected in multiple select lists and add them together to get a running total.

Here's a working version that demonstrates this: 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" />

no rel. matches select lists in case you have others that should not follow this behavior.

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

<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);
});