javascript - 从 php 创建的下拉列表列表中单独填充 textarea

Question

所以我有一个从数据库自动生成的下拉列表选择列表，并且我为每个列表自动创建了一个文本区域。

这是 html/php 代码:

<div class="row options-content">
<?php if ($options) { ?>
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'select') { ?>
<div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
  <label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['name']; ?></label>
  <select name="option[<?php echo $option['product_option_id']; ?>]" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control">
    <option value=""><?php echo $text_select; ?></option>
    <?php foreach ($option['product_option_value'] as $option_value) { ?>
    <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
    <?php if ($option_value['price']) { ?>
    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
    <?php } ?>
    </option>
    <?php } ?>
  </select>
</div>
<textarea name="option-<?php echo $option['name']; ?>" rows="1" cols="50" class=""></textarea>
<?php } ?>
<?php } ?>
<?php } ?>

这是javascript:

<script>
$( "select" )
  .change(function () {
     var str = "";
     $( "select option:selected" ).each(function() {
     str += $( this ).text() + " ";
    });
    $( "textarea" ).text( str );
  })
  .change();
</script>

一切似乎都正常，除了当第一个下拉菜单被选中时，它会更改所有其他文本区域中的文本...我如何仅在指定的文本区域中进行更改？

我尝试了以下但没有任何效果:

<script>
$( "select" )
  .change(function () {
     var str = "";
     $( "select option:selected" ).each(function() {
     str += $( this ).text() + " ";
    });
    $( "#option-<?php echo $option['name']; ?>" ).text( str );
  })
  .change();
</script>

Answer 1

所做的更改

► 使用$(this) 来标识当前更改的选择框。

$( "select" )
  .change(function () {
     var str = "";
     $(this).find("option:selected" ).each(function() {
         str += $( this ).text() + " ";
     });
     $(this).parent().next().text( str );
  })
  .change();