最近和小伙伴发现,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. .Net程序员玩转Android系列之一~Java快速入门

    前言 前段时间受公司业务发展需要,探索性进入Android开发领域.一切从零开始,java基础,Java进阶,Android框架学习,Eclipse熟悉,最终到第一个即时通讯App完成,历经一个月的时 ...

  2. 数据结构(二) --- 伸展树(Splay Tree)

    文章图片和代码来自邓俊辉老师课件 概述 伸展树(Splay Tree),也叫分裂树,是一种二叉排序树,它能在O(log n)内完成插入.查找和删除操作.它由丹尼尔·斯立特Daniel Sleator ...

  3. 初学zookeeper--自定义事件监听

    zk有四种节点类型: 持久节点,持久顺序节点,临时节点,临时顺序节点. 自定义监听事件时,在节点的创建,修改,删除的方法第一行都需要加入是否监听的一个方法: //开启监听的方法.第二个参数表示是否开启 ...

  4. Oracle 数据库字典 sys.obj$ 表中关于type#的解释

    sys.obj$ 表是oracle 数据库字典表中的对象基础表,所有对象都在该表中有记录,其中type#字段表明对象类型,比如有一个表 test ,则该对象在sys.obj$ 中存在一条记录,name ...

  5. js设置时间无效的问题

    在发送短信息验证码的时候要用到js设置时间倒序问题:有时候这种常规写法会导致js失效,试了很多方法才找到问题所在,可能是因为js版本过低导致. setTimeout(showT(t-1),5000) ...

  6. js上传并且预览图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Python入门-内置函数二

    看到标题你也能猜到今天要说大概内容是什么了,没错,昨天没有说完的部分再给大家说说(有一些重合的部分),内置函数的内容比较多,并且工作中经常用到的却不太多,很多都是不太常用的,所以我就着重说一些比较常用 ...

  8. MySQL数据库(4)----生成统计信息

    MySQL最有用的一项功能就是,能够对大量原始数据进行归纳统计. 1.在一组值里把各个唯一的值找出来,这是一项典型的统计工作,可以使用DISTINCT 关键字清楚查询结果里重复出现的行.例如,下面的查 ...

  9. 常量、变量、数据类型 搞错N+1次 累死

    public class hello { /** * * * * * @param args */ public static void main(String[] args) { String _$ ...

  10. c/c++ 按照行读取文件

    本文代码都在Windows/VC++6.0下测试过, 在linux/g++下也没有问题. 但是请一定注意linux和Windows文件格式的区别,比如: 1. 当linux上的代码读取Windows文 ...