突出显示html中下拉表单选项的当前选定选项

Highlight currently selected option for dropdown form options in html

本文关键字：选项 表单 显示 html      更新时间：2023-09-26

如何根据用户当前所在的页面突出显示选项？

例如，如果在"床位"页面上，选择了"床位"选项。

这是在wordpress侧边栏文本小部件的内部，所以它不是在每个页面上单独编码的。我想可能需要javascript来检测它在哪个页面上？

<form>
<select onChange="location=this.options[this.selectedIndex].value;">
<option value="#">Select a Category</option>
<option value="https://www.furnishare.it/shop/">Shop All</option>
<option value="/product-category/beds/">Beds</option>
<option value="/product-category/chairs/">Chairs</option>
<option value="/product-category/decor/">Decor</option>
<option value="/product-category/dressers/">Dressers</option>
<option value="/product-category/sofas/">Sofas</option>
<option value="/product-category/storage/">Storage</option>
<option value="/product-category/tables/">Tables</option>
</select>
</form>

谢谢！

您想要获得url路径名：

window.location.pathname

我建议您在JS文件中执行此操作，而不是内联HTML。实现（jsfiddle由于某种原因没有保存）：

http://codepen.io/anon/pen/VvEeMY

确保取消评论评论的位置行，使其在您的网页上工作：

var location = window.location.pathname;

请注意，我强烈建议不要使用onClick等属性来处理DOM事件。。。但为了回答您的问题，我已经编写了上面的纯JS代码。

编辑：使用location.pathname需要从您的域之后开始使用完整路径，但由于您的实现已经在select>选项值中这样做了，我可以使用location.path名称来简化它。

相关文章：