如何阻止浏览器移除select标签内option中的anchor标签？

首先纠正一个错误：浏览器移除标签不是因为escape()函数，而是HTML规范明确规定元素只能包含文本内容，不允许嵌套这类交互式元素。浏览器的HTML解析器会自动修正这种不符合规范的DOM结构，所以标签会被清理，只保留文本。

方法一：通过change事件实现跳转 #

把跳转地址存在的value属性中，监听的change事件，选中后自动跳转： <select id="pageSelector"> <option value="page1.html">Page 1</option> <option value="page2.html">Page 2</option> </select> <script> document.getElementById('pageSelector').addEventListener('change', function(event) { const targetUrl = event.target.value; if (targetUrl) { window.location.href = targetUrl; } }); </script> 方法二：模拟链接的视觉样式 # 如果需要让看起来和链接一样（蓝色、下划线），可以给添加内联样式，再结合上述跳转逻辑： <select id="styledPageSelector"> <option value="page1.html" style="color: #0000EE; text-decoration: underline;">Page 1</option> <option value="page2.html" style="color: #0000EE; text-decoration: underline;">Page 2</option> </select> <script> document.getElementById('styledPageSelector').addEventListener('change', function(event) { const targetUrl = event.target.value; if (targetUrl) { window.location.href = targetUrl; } }); </script> 动态生成场景的适配 # 如果你的是动态生成的，只需要确保每个的value属性正确设置为跳转地址，再给绑定相同的change事件监听即可，逻辑完全一致。 内容的提问来源于stack exchange，提问作者Phyln