最近和小伙伴发现，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. C#实现Javascript的Splice方法

    最近开始学习Javascript语言,看到splice方法,以下引用其说明:该方法是一个通用删除和插入元素的方法,它可以在数组指定的位置开始删除或插入元素.其包括3个参数:第一个参数指定插入的起始位置 ...

  2. Sequence contains no elements : LINQ error

    1.错误意思: 出现错误的原因是:你要从一个null中取的数据. 2.错误的处理 1,使用FirstOrDefault() 来代替 First() 2.使用SingleOrDefault 来代替 Si ...

  3. logstash结合es，日志收集

    1.下载好logstash后,解压目录 2.进入bin目录,新建文件 logstash_default.conf input { tcp { port => 4560 codec => & ...

  4. 希尔排序——Python实现

    一.排序思想 希尔排序思想请参见:https://www.cnblogs.com/luomeng/p/10592830.html 二.python实现 def shellSort(arr): &quo ...

  5. Spring课程 Spring入门篇 6-3 ProxyFactoryBean及相关内容（下）

    1 解析 1.1 使用global advisors demo 1.2 jdk代理和cglib代理的选择 1.3 如何强制使用CGLIB实现AOP? 1.4 JDK动态代理和CGLIB字节码生成的区别 ...

  6. JavaScript switch语句

    JavaScriptswitch语句 switch语句用于基于不同的条件来执行不同的动作. JavaScript switch 语句 使用switch语句可以进行多项选择. 语法: switch( 变 ...

  7. Flex和MyEclipse10整合时候需要注意的问题

    1.myeclipse和flex的位数要一致,不能混着安装 2.独立安装完Adobe Flash Builder 4.6 Installer之后,在其的安装文件夹下有一个utilities文件夹下有一 ...

  8. hive配置参数的说明：

    hive.ddl.output.format:hive的ddl语句的输出格式,默认是text,纯文本,还有json格式,这个是0.90以后才出的新配置: hive.exec.script.wrappe ...

  9. c# BackGroundWorker 多线程操作的小例子 (转)

    在我们的程序中,经常会有一些耗时较长的运算,为了保证用户体验,不引起界面不响应,我们一般会采用多线程操作,让耗时操作在后台完成,完成后再进行处理或给出提示,在运行中,也会时时去刷新界面上的进度条等显示 ...

  10. 我的前端页面开发js简易有效环境

    前端开发主要涉及到html, css(less/sass), javascript这几个方面的知识.真正的快速有效开发,必须实现所谓所见即所得.在构建生产时,可能需要使用gulp/grunt等task ...