html中select的option自定义属性，然后js 获取

最新推荐文章于 2025-06-15 16:44:18 发布

原创最新推荐文章于 2025-06-15 16:44:18 发布 · 8.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #select #option #自定义属性 #获取自定义option的属性

html+js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用自定义属性实现下拉框选中项URL跳转的方法。通过给select元素添加id，并设置option的url属性，利用JavaScript获取选中项的url属性值，从而实现页面的自动跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 <select id="mySelect" onchange="selectTurnToUrl(this)" class="form-control" style="height: 24px; line-height: 24px; padding: 0 12px;border-radius:0"></select>
//首先给select一个id
2、自定义option属性，名字为url,这里是希望选中某一个选项之后完成跳转。
var oOption = document.createElement("option");

oOption.text = r[i].text;
oOption.value = r[i].value;
oOption.setAttribute("url", r[i].url);//自定义属性调转url

myselect.add(oOption);

3、js获取自定义的option属性。

                 function selectTurnToUrl(sobj)
            {
                var url = $(sobj).find("option:selected").attr("url");//获取select的option中的自定义属性url
                location.href = url;

}

图就不贴了。