根据选择的“li”类将“name”属性添加到“select”标签

Question

我的 'select' 列表由 'chosen.js' 转换为 'ul' 列表，但搜索功能取决于 'select' 列表的 'name' 属性。

<select name="test">
    <option  value="1">Пункт 1</option>
    <option  value="2">Пункт 2</option>
    <option  value="3">Пункт 3</option>
    <option  value="4">Пункт 4</option>
</select>

<div>
    <ul>
        <li class="parent result-selected">one</li> (selected option)
        <li class="active-result">two</li>
        <li class="active-result">three</li>
        <li class="active-result">four</li>
    </ul>
</div>

当带有“result-selected”类的“li”也包含“parent”类时，我想将“select”名称从“test”更改为“parent”。

var select = document.querySelector('select');
select.addEventListener("change", function() {
    var name = this.querySelector('option:checked').id;
     select.name = name;
});

此代码基于选项 'id' 并且在成为 'select' 列表之前一直有效，但不适用于将 'chosen.js' 转换为 'ul' 列表

Answer 1

您可以在ul 标签上使用MutationObserver。检查类属性的变化。如果类属性发生变化，获取li 类result-selected 并查看它是否有类parent。

const selectEle = document.querySelector('select');

const targetNode = document.querySelector('ul');

const config = {
  attributes: true,
  childList: true,
  subtree: true
};

const callback = function(mutationList) {
  for (let mutation of mutationList) {
    if (mutation.type === 'attributes') {
      if (mutation.attributeName == "class") {
        const selectLi = document.querySelector('.result-selected');
        console.log('Before-', selectEle.name);
        selectEle.name = (selectLi.classList.contains('parent')) ? "parent" : "test";
        console.log('After-', selectEle.name);
      }
    }
  }
}
const observer = new MutationObserver(callback);

observer.observe(targetNode, config);

const li = document.querySelector('li');
li.classList.add('parent');
// li.classList.remove('parent');

<select name="test">
  <option value="1">Пункт 1</option>
  <option value="2">Пункт 2</option>
  <option value="3">Пункт 3</option>
  <option value="4">Пункт 4</option>
</select>

<div>
  <ul>
    <li class="result-selected">one</li> (selected option)
    <li class="active-result">two</li>
    <li class="active-result">three</li>
    <li class="active-result">four</li>
  </ul>
</div>

Answer 2

它在documentation 中声明它有自己的事件处理程序；语法是$("#form_field").chosen().change(…);。

所以在你的情况下，试试吧；

$("select").chosen().change(function(){
    ... code here
});