Question

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

<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（域名），然后它会在选中时跳转到相关页面。

Answer 1

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

Working JSFiddle Demo

Answer 2

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

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

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

2 个答案: