如何在有多个下拉列表的文本区域中插入选择值并选择具有相同类名的值

Question

我有多个具有相同类名的 div，我想在属于我单击的选择所在的 div 的文本区域中插入来自 select 的值。我希望它能够与超过 10 个 div 一起使用，这就是为什么我为每个 div 制作了不同的类或 ID//Insert value form dropdown in textarea$(document).ready(function(){    $(".js-example-basic").change(function () {            $(".textArea").val(this.value);     }).change();});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="selectValue">  <select name="selectProgram[]" class="js-example-basic">    <option value="">Choose tour</option>    <option value="Tour1">Tour 1</option>    <option value="Tour2">Tour 2</option>    <option value="Tour3">Tour 3</option>  </select>  <textarea name="tourText[]" class="form-control textArea" placeholder="Tour description"></textarea></div><div class="selectValue">  <select name="selectProgram[]" class="js-example-basic">    <option value="">Choose tour</option>    <option value="Tour1">Tour 1</option>    <option value="Tour2">Tour 2</option>    <option value="Tour3">Tour 3</option>  </select>  <textarea name="tourText[]" class="form-control textArea" placeholder="Tour description"></textarea></div>摆弄上面的代码

Answer 1

发生这种情况是因为 textarea 类相同。

你快到了。使用thiswithnext在文本区域上获得所需的结果。

//Insert value form dropdown in textarea

$(document).ready(function(){

    $(".js-example-basic").change(function () {

       $(this).next(".textArea").val(this.value);

     }).change();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>

  <select name="selectProgram[]" class="js-example-basic">

    <option value="">Choose tour</option>

    <option value="Tour1">Tour 1</option>

    <option value="Tour2">Tour 2</option>

    <option value="Tour3">Tour 3</option>

  </select>

  <textarea name="tourText[]" class="form-control textArea" placeholder="Tour description"></textarea>

</div>

<div>

  <select name="selectProgram[]" class="js-example-basic">

    <option value="">Choose tour</option>

    <option value="Tour1">Tour 1</option>

    <option value="Tour2">Tour 2</option>

    <option value="Tour3">Tour 3</option>

  </select>

  <textarea name="tourText[]" class="form-control textArea" placeholder="Tour description"></textarea>

</div>