chosen.js转换ul列表后，如何根据选中li修改select的name属性

问题的核心在于：Chosen.js会隐藏原生的<select>元素，用户实际交互的是它生成的<ul>/<li>结构，原生的change事件无法正确捕捉到Chosen界面的选择操作，而且你的需求是基于生成的<li>的类名来判断，所以需要改用Chosen提供的自定义事件来实现逻辑。

步骤1：确保Chosen已正确初始化 #

首先要确认你已经初始化了Chosen插件（如果还没做的话）：

// 用jQuery初始化（Chosen通常配合jQuery使用）
$('select[name="test"]').chosen();

步骤2：监听Chosen的chosen:change事件 #

Chosen会在用户完成选择后触发chosen:change事件，我们可以在这个事件回调里判断选中项的类名，再修改select的name：

原生JavaScript版本

const selectEl = document.querySelector('select[name="test"]');

// 监听Chosen的change事件
selectEl.addEventListener('chosen:change', function() {
  // 获取Chosen实例中的选中项元素
  const chosenInstance = this._chosen;
  const selectedLi = chosenInstance.selected_item;

  // 判断选中的li是否同时包含result-selected和parent类
  if (selectedLi && selectedLi.classList.contains('parent')) {
    this.name = 'parent';
  } else {
    // 恢复原来的name
    this.name = 'test';
  }
});

jQuery版本（更简洁）

$('select[name="test"]').on('chosen:change', function() {
  // 获取Chosen实例的选中项元素
  const selectedLi = $(this).data('chosen').selected_item;
  
  if ($(selectedLi).hasClass('parent')) {
    $(this).attr('name', 'parent');
  } else {
    $(this).attr('name', 'test');
  }
});

为什么原来的代码失效？ #

1. Chosen隐藏了原生select，用户点击的是生成的li，原生change事件不会被触发（或者触发时机不符合预期）；
2. 原来的逻辑依赖option的id属性，但你的需求是基于生成的li的类名，两者的判断依据完全不同，所以原逻辑不再适用。

额外注意事项 #

• 确保选择器的准确性：如果页面上有多个Chosen实例，建议给目标select添加唯一的id或类名，避免选择错误的元素；
• Chosen的实例属性：selected_item是Chosen实例中存储当前选中li元素的属性，直接使用它比全局查找.result-selected.parent更可靠，不会受其他元素干扰。

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