如何在有多个下拉列表的文本区域中插入select中的值,并使用相同的类名进行选择



我有多个类名相同的div,我想在属于我点击的select所在的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>

在上摆弄代码

这是因为textarea类是相同的。

你就快到了。使用thisnext在文本区域上获得期望的结果。

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

最新更新