Question

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

Answer 1

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