如何使用JQuery实现选中下拉选项时联动修改对应选项值？

当然可以用jQuery实现这个需求，思路其实很简单，我来给你一步步拆解～

首先，先补全你提到的HTML场景（假设你有一个img元素用来展示图片，同时要修改选中选项的value）：

<label for="item">Item:</label>
<select name="item" id="item">
  <option value="Ball">Ball</option>
  <option value="Door">Door</option>
  <option value="Pen">Pen</option>
</select>
<!-- 用来展示对应图片的img元素 -->
<img id="item-preview" src="" alt="Item Preview" style="margin-left: 10px;">

接下来是jQuery的实现代码，核心是监听select的change事件，根据选中的选项状态来修改对应值：

// 确保DOM加载完成后执行代码
$(document).ready(function() {
  // 监听item下拉框的选项变更事件
  $('#item').on('change', function() {
    // 获取当前选中的option元素
    const $selectedOpt = $(this).find('option:selected');
    const optText = $selectedOpt.text();
    const currentVal = $selectedOpt.val();

    // 处理Ball选项的双向切换逻辑
    if (optText === 'Ball') {
      if (currentVal === 'Ball') {
        // 第一次选中Ball：修改选项value为ball.gif，同时设置img的src
        $selectedOpt.val('ball.gif');
        $('#item-preview').attr('src', 'ball.png');
      } else {
        // 选中已经修改过的Ball选项（value为ball.gif）：恢复原值
        $selectedOpt.val('Ball');
        $('#item-preview').attr('src', '');
      }
    } else {
      // 选中其他选项时，如果Ball选项之前被修改过，恢复它的默认value
      $(this).find('option:contains("Ball")').val('Ball');
      $('#item-preview').attr('src', '');
    }
  });
});

关键逻辑说明： #

• 我们通过$(this).find('option:selected')精准定位当前选中的选项，避免影响其他选项
• 同时判断选项的文本和当前value，实现"选中Ball时修改值，再次选中（此时value已变）时恢复"的双向逻辑
• 修改选项的value用val()方法，修改img的图片路径用attr('src', 新路径)

如果你的需求是修改另一个select的选项值（比如名为img的下拉框），只需要调整部分代码即可：

<!-- 新增img下拉框 -->
<label for="img">Image Option:</label>
<select name="img" id="img">
  <option value="">Select an Item First</option>
</select>

对应的jQuery代码：

$(document).ready(function() {
  $('#item').on('change', function() {
    const selectedVal = $(this).val();
    const $imgSelect = $('#img');
    const $ballOpt = $(this).find('option:contains("Ball")');

    if (selectedVal === 'Ball') {
      // 修改当前Ball选项的value为ball.gif
      $ballOpt.val('ball.gif');
      // 更新img下拉框的选项
      $imgSelect.empty().append('<option value="ball.png">ball.png</option>');
    } else {
      // 选中其他选项时，恢复Ball选项的默认值和img下拉框的初始状态
      $ballOpt.val('Ball');
      $imgSelect.empty().append('<option value="">Select an Item First</option>');
    }
  });
});

这样就能完美实现你想要的"选中特定选项时，修改自身或其他元素值"的需求啦～

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