Question

我有一份产品清单。

<ul style="padding-left: 0;">
    <li style="text-indent: 0;">
        <a href="/products/category1/sub-category1.html"><span>Category 1</span></a>
        <ul style="padding-left: 0;">
            <li style="text-indent: 0;">
                <a href="/products/category1/sub-category1.html"><span>Sub Category 1</span></a>
            </li>
            <li style="text-indent: 0;">
                <a href="/products/category1/sub-category2.html"><span>Sub Category 2</span></a>
            </li>
        </ul>
    </li>
    <li style="text-indent: 0;">
        <a href="/products/category2.html"><span>Category 2</span></a>
        <ul style="padding-left: 0;">
            <li id="selected_sub_category" style="text-indent: 0;">
                <a href="/products/category2/sub-category1.html"><span>Sub Category 1</span></a>
            </li>
        </ul>
    </li>
    <li style="text-indent: 0;">
        <a href="/products/category3/sub-category1.html"><span>Category 3</span></a>
        <ul style="padding-left: 0;">
            <li style="text-indent: 0;">
                <a href="/products/category3/sub-category1.html"><span>Sub Category 1</span></a>
            </li>
            <li style="text-indent: 0;">
                <a href="/products/category3/sub-category1.html"><span>Sub Category 2</span></a>
            </li>
            <li style="text-indent: 0;">
                <a href="/products/category3/sub-category1.html"><span>Sub Category 3</span></a>
            </li>
        </ul>
    </li>
    <li style="text-indent: 0;">
        <a href="/products/category4.html"><span>Category 4</span></a>
        <ul style="padding-left: 0;">
        </ul>
    </li>
</ul>

我有一些jQuery可以在屏幕达到特定分辨率时将列表转换为选择菜单。要显示哪一个是由CSS媒体查询控制的。

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});

此代码始终选择第一个选项。我想做的是选择我正在选择的选项。有没有办法轻松改变这一点。我似乎无法弄明白，因为我是jQuery的新手。

Answer 1

这不是关于jQuery。这是一个简单的逻辑。您要将selected="selected"添加到所有<option>元素：

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",   // Seeee???
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

您需要做的是，删除该行并将其替换为某个标记或当前URL。

// Create default option "Go to..."
$("<option />", {
   "selected": (isCurrentLink) ? "selected" : false,
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

您需要根据所选的当前页面或与当前页面相关的菜单项定义isCurrentLink以返回true。

Answer 2

您可以使用window.location.pathname /变量来比较anchor元素的href属性，基于它.prop(propertyName, value)方法可以用来设置selected属性。

var el = $(this);
$("<option />", {
   "value": el.attr("href"),
   "text": el.text()
})
.prop('selected', window.location.pathname == el.attr("href"));

将列表更改为下拉列表并添加所选选项

2 个答案: