select下拉框之默認選項清空

本文轉載自查看原文 2018-02-04 18:37 3227 html

最近和小伙伴發現，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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 input清空和重置select下拉框去除select下拉框默認樣式 Element vue Select 下拉框默認 select下拉框默認箭頭怎么去掉？ select下拉框默認不能選擇第一個選項的問題 python+selenium七：下拉框、選項框、select用法 js 清空 select 下拉框 option 的值 vue實現 select 下拉框點擊選項觸發事件下拉框清空與追加 Js修改select下拉框及option默認顏色