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

select下拉框之默认选项清空的更多相关文章

  1. vue select下拉框绑定默认值

    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...

  2. js选中下拉框的默认选项

    //这是修改时选中 $("#type").find("option[value='"+factory+"']").attr("se ...

  3. Element UI系列：Select下拉框实现默认选择

    实现的主要关键点在于 v-mode 所绑定的值,必须是 options 数组中对应的 value 值

  4. select下拉框选择触发事件

    我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...

  5. select下拉框使用完毕后，重置按钮使其清空

    需求描述:select下拉框后边有两个按钮,一个查询,一个重置,点击重置,select会清空之前选择的那个查询条件 解决思路:卧槽,这不so easy 么,用那个jQ封装的trigger函数搞定啊,对 ...

  6. 去除select下拉框默认样式

    去除select下拉框默认样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #; /*很关键:将默认的select选 ...

  7. 点击select下拉框获取option的属性值

    select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...

  8. Python3.x：遍历select下拉框获取value值

    Python3.x:遍历select下拉框获取value值 Select提供了三种选择方法: # 通过选项的顺序,第一个为 0 select_by_index(index) # 通过value属性 s ...

  9. JQuery操作select下拉框

    JQuery操作select下拉框 获取Select选择的Text和Value $("#select_id").change(function(){//code...}); //为 ...

随机推荐

  1. MVC-cshtml（条件编译已关闭）

    加单引号    

  2. Centos7 redis 5.0 服务设置、启动、停止、开机启动

    redis 没有配置服务,没有开启动,每次都要手工配置. 解决这个麻烦,我们new一个服务,然后开机启动即可. 1.创建服务(redis.conf 配置文件要注意,经过cp产生了很多个redis.co ...

  3. request方法总结

     1.获得指定的头 String header = response.getHeader("user-agent"); 2.获得所有头的名称 Enumeration<Stri ...

  4. springboot伪静态

    在日常网站访问中,会把动态地址改造成伪静态地址. 例如: 访问新闻栏目 /col/1/,这是原有地址,如果这样访问,不利于搜索引擎检索收录,同时安全性也不是很好. 改造之后: /col/1.html. ...

  5. Linux 更新python至2.7后ImportError: No module named _ssl

    原文:http://blog.51cto.com/hunt1574/1630961 编译安装python 2.7后无法导入ssl包 解决办法: 1 下载地址:http://www.openssl.or ...

  6. Js窗口嵌套

    <script type="text/javascript"> if (window.parent.window != window) { window.top.loc ...

  7. Effective C++ .05 一些不自动生成copy assigment操作的情况

    主要讲了 1. 一般情况下编译器会为类创建默认的构造函数,拷贝构造函数和copy assignment函数 2. 执行默认的拷贝构造/copy assignment函数时,如果成员有自己的拷贝构造/c ...

  8. stylish——一键为网页换肤，改变字体大小，去除广告

    今天给大家介绍的是一款非常好用的插件stylishstylish是一款可以为网站自定义主题的插件 可以在chrome的应用商店找到也可以通过网址访问https://userstyles.org/ 应用 ...

  9. sql-syscolumns,INFORMATION_SCHEMA.columns,sysobjects

    //计算表tb_Blog的字段个数 select count(*) from syscolumns where id=object_id('tb_Blog') 获取指定表的所有字段和字段类型 SELE ...

  10. JavaScript中的原型和原型链

    1.原型是什么?原型链是什么? 原型是一个prototype对象,用于表示类型之间的关系: 原型链指的是在JavaScript中对象之间的继承是通过prototype对象指向父类对象,直到指向Obje ...