前端下拉列表的實現

阿新 • • 發佈：2018-11-11

實現下拉列表

實現效果如圖：

主要注意一下enevt事件，同時因為感覺select原生的樣式不容易修改，因此自己寫了一個下拉列表，便於修改樣式。
直接上程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>自定義下拉列表</title>
    <style>
        html,
        body {
            height: 100%;
        } 


        .select {
            width: 200px;
            background: #ccc;
            font-size: 14px;
            position: relative;
        }

        .clearfix {
            /* 清楚浮動 */
            content: "";
            display: table;
            clear: both;
        }

        .select div {
            height 
: 30px;
            /* 這個貌似對span有效，但是對於input沒有效果 */
            line-height: 30px;
        }

        .select div span {
            /* 這裡如果使用inline-block，inline-block會多一點間距，還是使用block+float來進行佈局 */
            display: block;
            text-align: center;
            float: left;
            font-size: 12 
px;
            width: 50px;
        }

        .select div input {
            width: 150px;
            display: block;
            float: left;
            /* 預設的input包含一些padding  border */
            box-sizing: border-box;
            /* 設定高度和外層div的高度一致，這樣看起來才像是垂直居中顯示 */
            height: 30px;
        }

        .select ul {
            position: absolute;
            /* list-style-type: none; */
            background: #aaa;
            /* 去掉預設的樣式以及margin  padding */
            list-style: none;
            margin: 0;
            padding: 0;
            /* 如果設定了position，那麼這裡的100%可能是相對與html而言的,但是這裡設定了select的position，所以這裡的寬度是相對於select而言 */
            /* width: 100%; */
            width: 150px;
            box-sizing: border-box;
            /* 避免被遮住 */
            z-index: 100;
            text-align: center;
            left: 50px;
            /* 預設是隱藏的 */
            display: none;
        }

        .select ul li {
            line-height: 1.4rem;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }

        .select ul li:hover {
            /* 懸浮的時候顯示背景顏色 */
            color: red;
        }
    </style>
</head>

<body onclick="closeLists()">
       <div class="select">
        <div class="clearfix">
            <span>事件型別</span>
            <input type="text" readonly onclick="showList()" id="Etype">
        </div>
        <ul id="lists">
            <li onclick="chooseParam()">爆炸事故</li>
            <li onclick="chooseParam()">火災事故</li>
            <li onclick="chooseParam()">中毒事件</li>
            <li onclick="chooseParam()">坍塌事故</li>
        </ul>
    </div>
    <script>
        function showList() {
            document.getElementById("lists").style.display = "block";
            // let ev = event || window.event;
            event.stopPropagation()
        }

        function chooseParam() {
            // console.log(event)
            document.getElementById("Etype").value = event.target.innerText;
        }

        function closeLists() {
            document.getElementById("lists").style.display = "none";
            event.stopPropagation(); //阻止冒泡
        }
    </script>
</body>

</html>

前端下拉列表的實現

實現下拉列表實現效果如圖：主要注意一下enevt事件，同時因為感覺select原生的樣式不容易修改，因此自己寫了一個下拉列表，便於修改樣式。直接上程式碼： <!DOCTYPE html> <html lang="en"> <head&

前端下拉列表設定預設值得用法

1：教程 <select> <option>選項1</option> <option>選項2</option> <option>選項3</option> .

EasyUI combobox下拉列表實現搜尋過濾（模糊匹配）

　　專案中的某個下拉列表長達200多個項，這麼巨大的數量一個一個找眼鏡都得看花，於是就得整了個搜尋功能。看網上別人帖子有隻能字首匹配的方案，但只能字首匹配的話用起來也不是很方便。於是就記錄一下模糊匹配的方案。實現效果：這裡使用的是combobox組合框，對於combobox的建立可以使用<i

下拉列表，點擊選擇實現跳轉鏈接 onchange="window.location=..."

this option 用戶 onchange ... tex 註意下拉 win <select onchange="window.location=this.value;">　　<option value="a.html">用戶管理</op

如何使用jquery的jsonp實現仿百度下拉列表

script chang charset 名稱 allow con 默認 cati 獲得使用了mui布局，可以換布局，這個不重要，重要的是怎麽實現的 <!doctype html> <html> <head> <me

jquery+css實現下拉列表

aps otto ddc () splay app lec and cti <!DOCTYPE html><html><head><meta charset="UTF-8"><title>fruit</tit

文本框實現下拉列表聯動

function on() ole -1 nbsp val edit end col 　　昨天做了一個文本框過濾下拉列表選項的東西，技術不復雜，記錄下來一遍提高再使用效率。　　 $(‘#searchOption‘).keyup(function(){

h5,用css實現下拉列表

gin clas isp pla mar ack 實現寬高 doc <!DOCTYPE html><html><head><meta charset="utf-8"><style> ul li{ list-st

25.用js和jquery實現下拉列表的左右選擇

select2 hit color nts -type utf ctype block 標簽 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

全路徑無限分類下拉列表的實現

rom fun rep 最終 [] 深度 color -- echo 最終效果圖：代碼詳情： include(‘db.inc.php‘); function likecate($path=‘‘){ sql = "select id,catename,path

vue實現下拉列表

<el-select v-model="form.fzr" placeholder="負責任"> <el-option v-for="(item,index) in fzr1" :key="index" :label="item.label" :value=

android實現帶下拉列表的文字框

android實現帶下拉列表的文字框 keywords：android studio、EditText、ImageView、PopupMenu。佈局 <TextView android:layout_width="wrap_c

vue實現下拉列表多選全選以及模糊查詢的vue元件

前端，有時有這樣的需求，需要一個下拉列表，還要有多選全選功能，以及模糊查詢功能的vue元件，我做了一個簡陋的元件，供大家參考，有問題請留言這是我的檔案目錄結構 ** 效果圖： o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_

Android編寫一個登入介面，利用資料庫實現記住密碼，註冊賬號，強制下線，以及類似QQ的下拉列表登入功能

首先呢，看到這麼長的標題，是不是感覺這些功能有點難以實現呢，哈哈，其實並沒有想象中的那麼複雜，下面就跟著筆者來一起學習一下這些功能是怎麼實現的吧！ 1.建立一個所有活動的父類，繼承自A

使用JavaScript實現下拉列表的聯動

在設計使用者註冊頁面時經常有籍貫等資訊要填寫，填寫這些資訊一般都是先選擇國家->省->市->鎮。此篇主要講述，當第一個下拉列表中的內容選定之後第二個下拉列表中的內容也隨之改變（例如：當你第一個下拉列表選擇江西時，第二個下拉列表會顯示南昌贛州等城市；當你第

前端介面導航欄的下拉列表使用js操作顯示

先來看成果圖 html程式碼： <nav> <ul class="nav"> <li class="dropDowm"> <a href="javascript:;" cl

HTML用DIV/CSS實現下拉列表

HTML程式碼： <body> <div class="title" > <h1>SYROS</h1> <ul> <li><a href="">HOME<

使用freemarker實現下拉列表

只對下拉列表項進行構建，到底為什麼不進行整體構建,只不過是某些js庫定位元素的原因。資料庫建表語句： --下拉列表T_LIST_ITEM CREATE TABLE IF NOT EXISTS T_LIST_ITEM( LI_ID INTEGER NOT NUL

帶多選框的下拉列表的實現

日常開發中，可能會遇到要做帶多選框的下拉，如下圖是不是你想要的呢，下面來談談實現，我這個用的是一個bootstrap multiselect 外掛，至於下載啥的網上到處都有 <select id="area" class="form-control text-i

使用jQuery+ajax實現級下拉列表的級聯顯示

html部分程式碼為下拉列表新增onchange事件 <div class="form-group" style="margin-right: 0">

前端下拉列表的實現

實現下拉列表

相關推薦