最近和小伙伴发现，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. MySql数据库与JDBC编程三

    多表连接查询(两种规范 SQL92和SQL99) SQL92规范: 等值连接,非等值连接,外连接,广义笛卡儿积连接 多个表都放在from后,,连接条件放在where后,条件要求两列值相等,则为等值连接 ...

  2. C++(笔)001.

    1.编程范式 编程范式是指计算机编程的基本风格,C++可容纳多种程度范式,如面向对象编程.泛型编程及传统的过程式编程. 2.与C相比较 C++在C语言的基础上新加的特性如下: a.类和对象.继承 b. ...

  3. IIS调试技术之 Debug Diagnostic (调试诊断)

    IIS 调试技术之 Debug Diagnostic (调试诊断) 1      概述 1.1  文档简介 系统出现错误或崩溃,免不了要进行调试.调试能进行的前提是错误能重现,但实际上要重现一个错误有 ...

  4. 第1天：jQuery效果

    1.jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(sele ...

  5. javaweb之请求的转发和重定向

    1.什么是请求转发和请求重定向? 请求转发: xxServlet收到请求,然后直接转发给yyServlet,然后yyServlet返回给客户端.整个过程中,客户端发出一个请求,收到一个响应. 重定向: ...

  6. maven（04）--一个简单的项目

    简单介绍 一个maven项目,使用hibernate框架,实现向mysql数据库中添加和获取操作,其他操作也是类似 如果你没有hibernate,那么也不要紧,这里主要介绍如何在一个maven项目中引 ...

  7. 廖雪峰JavaScript练习题2

    请把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字.输入:['adam', 'LISA', 'barT'],输出:['Adam', 'Lisa', 'Bart'] 肯定有更简单的方法, ...

  8. 09_dubbo服务发布原理

    [ 启动服务的日志分析 ] 1.暴露本地服务 Export dubbo service com.alibaba.dubbo.demo.DemoService to local registry, du ...

  9. Office - Word 2013

    1. 使用 Quick Parts 向Word中添加自定义属性: 2.

  10. linux 系统开机自启执行 操作的配置

    1 linux 服务注册 service文件 在service文件中设置变量和环境变量 [Unit] Description= #服务描述 After=syslog.target #服务启动依赖 [S ...