使用jQuery将name为color的select选中值传入input时代码失效如何解决

错误点： #

• change 事件仅会在 <select> 元素上触发，你原本将事件绑定到 <option> 节点上，无法触发回调逻辑，这是代码无法运行的核心原因。
• 你需要额外判断当前选中的 <option> 的 name 属性是否为 color，避免选中「Add new color」选项时，将无效值填入输入框。

修正后代码： #

$(document).ready(function() {
  // 把change事件绑定到select元素本身
  $('#select_color_id').on('change', function() {
    // 获取当前选中的option节点
    const selectedOption = $(this).find('option:selected');
    // 仅当选中option的name属性为color时才填入输入框
    if (selectedOption.attr('name') === 'color') {
      $('#search-query').val(selectedOption.val());
    }
  });
});

效果说明 #

修改后选中White/Black等颜色选项时，对应值会自动填入输入框，选中「Add new color」选项时不会修改输入框内容，符合需求。

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