最近和小伙伴发现，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 cloud ReadTimeout 问题解决

    今天使用Spring cloud @FeignClient 调用远程服务的时候,出现readTimeout问题,通过找资料解决方式如下 在Spring.properties 配置文件中添加如下属性解决 ...

  2. DataTables获取指定元素的行数据

    法1: 用jquey获取,var row = $('.edit').parent().parent(); 缺点:只能获取dom上的东西,不能获取没有渲染的数据 法2: 首先绑定行号到元素上 $('#e ...

  3. FWORK-数据存储篇 -- 范式与反模式 （学习和理解）

    理解 1.第二范式的侧重点是非主键列是否完全依赖于主键,还是依赖于主键的一部分.第三范式的侧重点是非主键列是直接依赖于主键,还是直接依赖于非主键列.  2. 反模式 范式可以避免数据冗余,减少数据库的 ...

  4. thinkphp传送文章id值

  5. java 输出菱形

    package com.demo01; public class Triangle { /** * @param args */ /* * 第一步:规定输出的行数 * 第二步:输出空格 再输出一个星, ...

  6. Luogu1261: 服务器储存信息问题

    题面 传送门 Sol 我们可以考虑每种\(rank\)的点\(u\)会被哪些点\(v\)感兴趣 如果\(dis[u][v]<\)所有满足\(rank\)大于\(rank[u]\)的点到\(v\) ...

  7. Creator4.2建模心得与技巧1——树的建立与跟随摄像机旋转

    Creator建模: 树一般在虚拟现实程序中都用面来实现,一种方法是通过两个面相互垂直成90度叠放在一起,另一种方法是让树面正对着视角一起旋转.这里主要说一下第二种方法. 主要思路:把树面一直正对着摄 ...

  8. 基础架构之Gitlab Runner

    基础架构之Gitlab Runner也是常用的基础设施,我们接着GitLab操作,具体使用GitlabRunner,如果不熟悉可以见官方详细介绍https://docs.gitlab.com/runn ...

  9. andriod导入v4包导致的错误

    最近升级android studio到版本3.0.1后,想要使用FragmentActivity这个类,导入v4包,发现R文件报错了,也就是找不到的意思. 如图:导包 此时选中v4包导进去. 确定之后 ...

  10. Unity使Text 文字逐个出现

    Text tex; string s="Unity使Text 文字逐个出现"; //字符出现间隔 waitTime = 0.3f; // float speed=0; //方法一 ...