标签标签有选择下拉列表，在IE11中不起作用

Question

在IE上测试的HTML代码：

 <input name="radiogroup" id="x" type="radio"> <label for="x"> test <select> <option value="5">5</option> <option selected="selected" value="10">10</option> <option value="15">15</option> </select> </label> 

这是一个示例代码

Answer 1

尝试在标签标签外移动选择标签。

 <input name="radiogroup" id="x" type="radio"> <label for="x"> test </label> <select> <option value="5">5</option> <option selected="selected" value="10">10</option> <option value="15">15</option> </select> 

Answer 2

您可以设置<select>的onclick事件以return false ：

 <input name="radiogroup" id="x" type="radio"> <label for="x"> test <select onclick="return false"> <option value="5">5</option> <option selected="selected" value="10">10</option> <option value="15">15</option> </select> </label> 

这是因为使onclick事件返回false会使默认浏览器行为不发生，而对于Internet Explorer，默认浏览器行为是您不想要的行为，即在用户打开它后立即关闭下拉列表。

请注意，如果您希望对除Internet Explorer之外的其他浏览器执行默认浏览器行为，则可以使用Javascript来测试浏览器是否为Internet Explorer，并且如果浏览器是Internet Explorer，则仅返回false（执行此操作的方法来自此回答 ）：

 function browserIsIE(){ if(!!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g)){ return true; } else{ return false; } } 

 <input name="radiogroup" id="x" type="radio"> <label for="x"> test <select onclick="if(browserIsIE()){return false}"> <option value="5">5</option> <option selected="selected" value="10">10</option> <option value="15">15</option> </select> </label> 

Javascript代码可以更加优雅，但为了清晰起见，我没有这样做。

请注意，我在Chrome，Firefox和Edge中测试了这两个代码，这两个代码在这三种浏览器中的行为完全相同，因此您可以使用上述任何一种代码。

您可以在此处阅读有关在事件中使用return false更多信息。