将无序列表转换为jquery </select>中的以下样式化<select>下拉列表

时间:2012-07-31 15:47:00

标签: jquery drop-down-menu

我想知道如何转换以下无序列表:

<ul class="menu">
 <li><a href="/">Category A</a></li>
 <li class="active"><a href="/category-b">Category B</a></li>
 <li><a href="/category-c">Category C</a></li>
</ul>

使用jQuery进入下面的格式,而“active”类将被识别并转换为Select标签中的选定属性

<select>
    <option value="http://www.window-location-url.xxx/">Category A</option>
    <option value="http://www.window-location-url.xxx/category-b" selected="selected">Category B</option>
    <option value="http://www.window-location-url.xxx/category-c">Category C</option>
</select>

编辑:我稍微更新了上面的代码,因为我在转换后意识到,value属性需要插入窗口位置URL(域名),然后它会在选中时跳转到相关页面。

2 个答案:

答案 0 :(得分:1)

首先,遍历列表项并使用jQuery构建一个选择下拉列表 - 检查每个列表项上名为active的类。如果列表项具有active类,请将option元素的selected属性设置为selected。接下来,将下拉列表添加到您喜欢的任何位置。

Working JSFiddle Demo

答案 1 :(得分:0)

var items=$("ul.menu li"),slc=$("<select />");
items.each(function(i,e){
  var no=$("<option />"),a=$(">a",$(e));
  if($(e).hasClass("active")){no.attr("selected","selected");}
  no.text(a.text());
  no.attr("value",a.attr("href"))
});

这应该可以解决问题。如果有问题,请告诉我。