jQuery结合PHP及Laravel实现select的option值复制到下一个元素问题咨询

核心问题原因 #

你的代码存在两个核心逻辑错误：

1. 遍历过程中$(this)指向的是源select下的单个option节点，你将新生成的option append到该节点内部，自然会出现嵌套、显示在同一行的问题
2. 没有明确区分源选择器和目标选择器，同时缺少前4个option的截取逻辑

修正方案 #

首先在Blade模板中明确区分源select和目标select的类名，避免选择器冲突：

<!-- 源select，最多8个option -->
<select class="source-brands-{{$n}}" name="b{{$n}}[]">
  @foreach($brands as $b)
  <option value="{{$b['name']}}">{{$b['name']}}</option>
  @endforeach
</select>

<!-- 目标select，最多接受4个option -->
<select class="target-brands-{{$n}}" name="target_b{{$n}}[]">
</select>

<button class="copyANDpaste">复制选项</button>

修正后的JS逻辑：

$('.copyANDpaste').on("click", function(event) {
  // 先清空目标select的旧内容，避免重复追加
  const $target = $(".target-brands<?=$n?>").empty();
  // 遍历源select的option，截取前4个
  $(".source-brands<?=$n?> option").slice(0,4).each(function() { 
    const newOption = new Option($(this).text(), $(this).val());
    // 把新option追加到目标select，而非源option内部
    $target.append(newOption);
  });
});

补充说明 #

• 用slice(0,4)直接截取前4个option，不需要额外做索引判断，逻辑更简洁
• 复制前先调用empty()清空目标select的原有内容，避免多次点击重复追加选项
• 如果需要复制选中的option而非全部option，把遍历的选择器换成$(".source-brands<?=$n?> option:selected")即可

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