最近和小伙伴发现,select默认选项一般是提示信息,怎么才能让当我们点击下拉框时,可选的选项中没有默认的提示信息呢?
思路:
1.当点击下拉框时,让默认提示信息,即下拉框第一个选项移除。
2.当没有选中下拉框的信息时,让默认提示信息添加到下拉框的第一个选项上。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标准select下拉框</title> </head> <body> <select id="skill" onfocus="choose()" onblur="turnoff()"> <option value="请选择">请选择</option> <option value="java">java</option> <option value="javaScript">javaScript</option> <option value="vue">vue</option> <option value="bootStrap">bootStrap</option> <option value="springMvc">springMvc</option> </select> </body> <script src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function () { $("#skill").val("请选择"); }) /** * 得到焦点事件 */ function choose() { if($("#skill").val() == "请选择"){ $("#skill option:eq(0)").remove(); $("#skill").val(""); } } /** * 失去焦点事件 */ function turnoff() { if($("#skill").val() == null || $("#skill").val() == ""){ $("#skill").prepend("<option value='请选择' selected='selected'>请选择</option>"); } } </script> </html>