如何用jQuery实现选中下拉框时在另一个下拉框显示逗号分隔值

AI 小北

2026-7-22

实现方案：将选中项的逗号分隔值填充到第二个下拉框

完全可行，只需在现有代码基础上补充逻辑即可实现需求，具体实现如下：

1. 补充HTML结构

在原HTML中添加第二个用于展示data-price2选项的下拉框：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select selectProduct1" name="university1" id="university1">
  <option>Select </option>
  <option data-price1="123" data-price2="c1,c2,c3,c4" value="Test 1">Test 1</option>
  <option data-price1="456" data-price2="c1,c2,c3,c4" value="test 2">Test 2</option>
</select>

<input type="number" name="fee1" id="fee1" value="" class="form-control regularPrice1">
<!-- 新增的第二个下拉框 -->
<select class="form-control selectPrice2" name="priceOptions2" id="priceOptions2">
  <option>Select option</option>
</select>

2. 修改JavaScript逻辑

在原change事件处理函数中，添加解析data-price2并填充到第二个下拉框的逻辑：

$('.selectProduct1').on('change', function() {
  // 原有填充price1到输入框的逻辑
  $('.regularPrice1').val($(this).find(':selected').data('price1'));

  // 新增处理price2填充到第二个下拉框的逻辑
  const selectedPrice2 = $(this).find(':selected').data('price2');
  const $price2Select = $('.selectPrice2');
  
  // 清空原有选项（保留默认提示项）
  $price2Select.html('<option>Select option</option>');
  
  // 如果有有效值则分割并生成选项
  if (selectedPrice2) {
    const price2Options = selectedPrice2.split(',');
    price2Options.forEach(opt => {
      $price2Select.append(`<option value="${opt}">${opt}</option>`);
    });
  }
});