Question

I have a dynamically generated collection of multiple select / input pairs, with generated IDs.

Stripped down:

<?php foreach ($products as $product) { ?>
  <select id="option_<?php echo $matching_id; ?>">
    <?php foreach ($options as $option) { ?>
       <option title="<?php echo $inputvalue ?>"></option>
    <?php } ?>
  </select>
  <input id="update_<?php echo $matching_id; ?>" type="text" value="" />
<?php } ?>

I have this jQuery to update the input field with the title attribute (have to use title since the value attribute is needed for something else) of the selected option:

$(document).ready(function () {
    $('select').change(function() {
    $('input').val($(this).find("option:selected").attr("title"));
    });
});

Of course this is wrong. It updates ALL the input fields with the same value, regardless of which select box is changed.

I need only the input box with the matching ID number to change. The $matching_id variable is always a number, if that’s relevant.

Can some helpful person point me in the right direction?

Answer 1

$(document).ready(function () {
    $('select[id^="option_"]').change(function() {
        $('input[id="update_' + $(this).attr('id').replace('option_', '') + '"]').val($(this).find("option:selected").attr("title"));
    });
});

Selects only selects when their id starts with "option", doesn’t require $matching_id to be numeric, necessarily.