点击弹出模态窗口下拉列表js

1、新建html文档。

2、书写hmtl代艨位雅剖码。<div class="zzsc-container"&爿讥旌护gt; <div class="content -bg"> <form action="#" method="post"> <div class="form-group"> <label for="name">姓名:</label> <input type="text" name="name" id="name" class="field-input"> </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> </select> </div> <div class="form-group"> <label for="name2">昵称:</label> <input type="text" name="name2" id="name2" class="field-input"> </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>

3、书写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>

4、书写并添加js代码。<script src="js/pickout.js"></script><script> pickout.to({ el:'.city', theme: 'dark', search: true }); pickout.to({ el:'.state', theme: 'clean', }); pickout.updated('.city'); </script>

5、代码整体结构。

6、查看效果。