最近和小伙伴发现，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. spring mvc如何优雅的使用fastjson

    1. 在spring mvc中配置fastjson <!-- 设置配置方案 --> <mvc:annotation-driven> <!-- 设置不使用默认的消息转换器 ...

  2. Mysql8.0.11简介，新特性

    MySQL 8.0 正式版 8.0.11 已发布,官方表示 MySQL 8 要比 MySQL 5.7 快 2 倍,还带来了大量的改进和更快的性能! 注意:从 MySQL 5.7 升级到 MySQL 8 ...

  3. [android] 与PHP的session进行交互demo

    从MainActivity跳转到MailIndexActivity,第一个请求接口设置session,第二个activity请求接口获取session java代码中获取header头里面的Set-C ...

  4. mac通过wine运行windows程序(将文件关联到windows程序notepad++)

    windows程序功能强大且已经习惯使用了,用mac总感觉不给力,例如记事本工具Notepad++就非常优秀.下面介绍如何在mac系统下通过wine来安装使用notepadd++程序. 1.安装win ...

  5. go install runtime/cgo: open /usr/local/go/pkg/darwin_amd64/runtime/cgo.a: permission denied

    在做更新时,收到下面提示: go get  github.com/astaxie/beego go install runtime/cgo: open /usr/local/go/pkg/darwin ...

  6. css3打包后自动追加前缀插件：autoprefixer

    用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了,自己不需要做什么改动就会自动加前缀: 下面一起看看涉及到autoprefixer这个插件的一些配置: 1,postcss ...

  7. side Effect

    副作用 side Effect 副作用是在计算结果的过程中,系统状态的一种变化,或者与外部世界进行的可观察的交互. 副作用可能包含,但不限于: 1.更改文件系统 2.往数据库里插入数据 3.发送一个h ...

  8. mac下打开hosts文件

    1打开控制台 输入vi(空格)/etc/hosts 进入hosts文件,输入i更改为编辑状态,更改完esc然后shift+:在输入wq保存退出 2打开Finder然后选择上面前往,到前往文件夹,输入/ ...

  9. HTTP协议（持续更新）

    http请求由三部分组成,分别是:请求行.消息报头.请求正文 HTTP(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接 ...

  10. vue2.0 生命周期 简析

    Vue2.0 生命周期钩子函数: <template> <div id='app'> {{message}} </div> </template> va ...