jQuery通过下拉列表更改tablerow中的文本字段

Question

I'm not very firm with JS and this whole jQuery thing.

This is my actuall HTML Output created in a foreach-loop:

$('#ProjectOfferPosition0IsystemTypeVariantId').on('change', function () {
    var prices = [];
    prices[1] = 500.00;
    prices[2] = 600.00;
    prices[6] = 1000.00
    var key = $('#ProjectOfferPosition0IsystemTypeVariantId option:selected').val();
    var oldPrice = 800.00;
    $('#ProjectOfferPosition0Price').val(prices[parseInt(key,10)] + oldPrice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr>
  <td><input type="hidden" name="data[ProjectOfferPosition][0][isystem_id]" value="1" id="ProjectOfferPosition0IsystemId"/><input type="hidden" name="data[ProjectOfferPosition][0][count]" value="1" id="ProjectOfferPosition0Count"/>I</td>
  <td><select name="data[ProjectOfferPosition][0][isystem_type_variant_id]" id="ProjectOfferPosition0IsystemTypeVariantId" class="select" required="required">
    <option value="">ohne Variante wählen</option>
    <option value="1">INPUT Basis System Wohnung 60</option>
    <option value="2">INPUT System Wohnung 100</option>
    <option value="6">INPUT System Haus 300</option>
  </select></td>
  <td><input name="data[ProjectOfferPosition][0][price]" step="0.01" type="number" value="800.00" id="ProjectOfferPosition0Price" class="input"/><input type="hidden" name="data[ProjectOfferPosition][0][position]" value="1" id="ProjectOfferPosition0Position"/></td>
</tr>

when i change the value of the dropdown i want the textfield in the same row updated (add a option-price to the existing product). thing is tho, i don't know how to 'read' which row i'm in (the [0]-Part)

EDIT got it running. still but still hardcoded, not dynamical responding to multiple rows

thank you for your help in advance

</div>

Answer 1

Giving your select an id as well that corresponds with the text field such as for example "select-id-nr" and "text-id-nr". You can then check for the select field on change, and simply take it's value and apply it to the text field with the same number id. You can take the corresponding id you need out of the event target's id which you'll get in the on change event object.