如何用選擇的下拉式Mootools替換多重有序列表？

Question

我有以下的HTML標記，與李/ UL下拉菜單和子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> 

，以適應移動瀏覽器不同的類名稱的混合略高於演示更在這裏我想轉換UL列表選擇列表像

<select class="nav" onchange="location.href=this.value"> 
<option value="link">Title</option> 
<option value="link">Title</option> 
<option value="link">Title</option> 
<option value="link">Title</option> 
<option value="link">Title</option> 
<option value="link">Title</option> 


</select> 

我試着用

window.addEvent('domready', function() { 



     $$('ul.nav li').each(function(el) { 

      var option = new Element('option',{html:el.get('html')}); 
      option.replaces(el); 
     }); 
     $$('ul.nav').each(function(el) { 

      var select= new Element('select',{html:el.get('html')}); 
      select.replaces(el); 
     }); 
}); 

但是正如你在這裏可以看到的那樣http://jsfiddle.net/xVrZe/我得到了所有沒有href屬性的li值，而我的子ul值則在1選擇選項中。

謝謝！

Answer 1

(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); 
}()); 

這個Wi將轉換並刪除原始的ul，也附加一個更改事件。 http://jsfiddle.net/dimitar/xVrZe/2/

Answer 2

試試這個：

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' 的標籤，而不是 '禮' 的標籤