如何在有多个下拉列表和 select 具有相同类名的文本区域中插入来自 select 的值

Question

我有多个具有相同类名的 div，我想在我点击的 select 所在的 div 的 textarea 中插入来自 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 class 是相同的。

你快到了。 将this与next一起使用以在 textarea 上获得所需的结果。

 //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>