JS彈出模態窗口下拉列表特效

本文轉載自查看原文 2016-04-14 19:47 10648 html5/ Javascript/ js/ javascript

或者掃描二維碼在手機體驗：

點擊選擇城市后，在彈出的層中的輸入框，輸入英文字母 h,會有HoverTree和Hewenqi兩個選項，可以點擊要輸入的項。

源碼下載：http://hovertree.com/h/bjaf/95ese8s1.htm

歡迎關注微信公眾號何問起，賬號: ihewenqi

或者微信掃描下面二維碼關注：

代碼如下：

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>JS點擊彈出模態窗口下拉列表特效 - 何問起</title>
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/20/css/demo.css">
<style>
* {
padding: 0;
margin: 0;
}

.content {
margin: 50px auto 0;
width: 300px;
min-height: 500px;
}

.form-group {
width: 100%;
float: left;
margin: 5px 0;
}

label {
margin-bottom: 10px;
float: left;
}

.field-input, select {
width: calc(100% - 20px);
float: left;
padding: 10px;
font-family: inherit;
}
</style>

<!--必要樣式-->
<link rel="stylesheet" href="http://hovertree.com/texiao/js/20/css/pickout.css">

</head>
<body>
<div class="container">
<div class="content">
<form action="#" method="post">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" name="name" id="name" class="field-input" placeholder="何問起">
</div>
<div class="form-group">
<label for="city">城市:</label>
<select name="city" id="city" class="city pickout" placeholder="選擇一個城市">
<option data-icon="&spades;" value="bj">北京</option>
<option data-icon="&clubs;" value="sh">上海</option>
<option data-icon="&hearts;" value="gz">廣州</option>
<option selected data-icon="&diams;" value="sz">深圳</option>
<option data-icon="&#9786;" value="xg">香港</option>
<option data-icon="&#9792;" value="sjz">石家庄</option>
<option data-icon="&#9794;" value="cd">成都</option>
<option data-icon="&#x2605;" value="ht">HoverTree</option>
<option data-icon="&#x25C6;" value="ht">Hewenqi</option>
</select>
</div>
<div class="form-group">
<label for="name2">昵稱:</label>
<input type="text" name="name2" id="name2" class="field-input" placeholder="柯樂義">
</div>
<div class="form-group">
<label for="state">職位:</label>
<select name="state" id="state" class="state pickout" placeholder="選擇一個職位">
<option value="pe">項目經理</option>
<option value="pb">工程師</option>
<option value="ba">培訓師</option>
<option value="sp">項目策划</option>
<option value="qd">前端開發</option>
</select>
</div>
</form>
</div>
</div>
<script src="http://hovertree.com/texiao/js/20/js/pickout.js"></script>
<script>

// Preparar o select
//pickout.to('.pickout');
pickout.to({
el: '.city',
theme: 'dark',
search: true
});

pickout.to({
el: '.state',
theme: 'clean',
});

// automaticamente
pickout.updated('.city');
</script>
</body>
</html>

轉自：http://hovertree.com/h/bjaf/8htcr2vo.htm

免責聲明！

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

猜您在找 js下拉列表選中原生JS實現上拉下拉列表 js動態生成下拉列表 js實現-下拉列表左右選擇原生js實現級聯下拉列表 JQuery 模態彈出窗口 ios 下拉列表銀行下拉列表 WPFComboBox下拉列表 vue下拉列表