Select 如何用选择下拉工具替换多顺序列表？

我有以下html标记，比这里的演示多一点，混合了li/ul下拉列表和不同的sub-ul类名称

<ul class="nav">
  <li><a href="linik">Title</a></li>
  <li><a href="linik">Title</a></li>
  <li><a href="linik">Title</a></li>
  <li><a href="linik">Title</a>
    <ul class="subnav">
      <li><a href="linik">Title</a></li>
      <li><a href="linik">Title</a></li>
      <li><a href="linik">Title</a></li>
      <li><a href="linik">Title</a></li>
    </ul>
  </li>
  <li><a href="linik">Title</a></li>
  <li><a href="linik">Title</a></li>
  <li><a href="linik">Title</a></li>
   <li><a href="linik">Title</a>
    <ul class="subnav">
      <li><a href="linik">Title</a></li>
      <li><a href="linik">Title</a></li>
      <li><a href="linik">Title</a></li>
      <li><a href="linik">Title</a></li>
    </ul>
  </li>
</ul>

但正如您在这里看到的，我得到的所有li值都没有href属性，我的sub ul li在1选择选项中

谢谢大家!

试试这个：

window.addEvent('domready', function () {     
  $$('ul.nav').each(function(el) {
    var options = el.getElements('li > a').map(function(el) {
        return new Element('option',{html:el.get('html'), value:el:get('href')});
    });

    var select= new Element('select');
    select.adopt(options);
    select.replaces(el);
  });
});

问题是：

1） 您需要从每个导航开始，只关注其内容（如果页面上有多个导航）

2） 你需要的是“a”标签，而不是“li”标签

(function() {
    var Options = new Elements(),
        ul = document.getElement('ul.nav');

    ul.getElements('li a').each(function(el) {
        Options.include(new Element('option', {
            text: el.get('html'),
            value: el.get('href')
        }));
    });

    new Element('select', {
        events: {
            change: function() {
                window.location.href = this.get('value');
            }
        }
    }).adopt(Options).replaces(ul);
}());

---

这将转换并删除原始ul，还将附加一个更改事件

非常感谢这帮我找到了正确的方向。我的问题是，我的a的内部也有跨距，我必须删除一些文本。啊，在这种情况下，你可以使用get（'text'）而不是get（'html'）。基本上，标签将自动剥离。

window.addEvent('domready', function () {     
  $$('ul.nav').each(function(el) {
    var options = el.getElements('li > a').map(function(el) {
        return new Element('option',{html:el.get('html'), value:el:get('href')});
    });

    var select= new Element('select');
    select.adopt(options);
    select.replaces(el);
  });
});

(function() {
    var Options = new Elements(),
        ul = document.getElement('ul.nav');

    ul.getElements('li a').each(function(el) {
        Options.include(new Element('option', {
            text: el.get('html'),
            value: el.get('href')
        }));
    });

    new Element('select', {
        events: {
            change: function() {
                window.location.href = this.get('value');
            }
        }
    }).adopt(Options).replaces(ul);
}());