jQuery多同类名div下select选中值写入对应textarea 无需单独设类ID

问题根源 #

现有代码的核心缺陷是DOM选择器的全局匹配逻辑：执行$(".textArea")时，会选中页面上所有带textArea类的文本域，没有把值的修改范围限定在当前下拉框所属的容器内，因此每次触发下拉框变更，都会全局覆盖所有文本域的内容。

修复实现 #

不需要为每个div配置独立类名或ID，借助jQuery的DOM遍历能力即可实现精准范围限定，且这种写法对任意数量的同结构容器都能正常生效，完全满足扩展需求。
修正后的功能代码：

// 下拉框选中值同步到同容器内的文本域
$(document).ready(function(){
    $(".js-example-basic").change(function () {
        // 从当前触发变更的下拉框元素出发，定位所属父容器，再查找容器内的文本域
        $(this).closest(".selectValue").find(".textArea").val(this.value);
    }).change();
});

实现逻辑说明 #

• 事件回调内的$(this)指代当前触发change事件的具体下拉框元素，不会和其他同类型下拉框产生混淆
• .closest(".selectValue")会沿着DOM树向上追溯，精准匹配到包裹当前下拉框的、类名为selectValue的div容器，把后续操作的范围锁定在这个容器内部
• 后续的.find(".textArea")仅会在锁定的容器范围内查找文本域，完全不会触达其他独立容器内的同类型元素

内容的提问来源于stack exchange，提问作者Michael Martensen