select下拉框之默认选项清空

最近和小伙伴发现，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>

 

posted @ 2018-02-04 18:37  娜娜娜娜小姐姐  阅读(7073)  评论(0)  编辑  收藏  举报