（原创）手写下拉菜单美化简易插件

在切图网（qietu.com）一个项目中 需要涉及到 下拉菜单美化，做过前端的人都知道，网页中有几大元素 是css美化不了的，是作为开发者来讲的比较苦恼的事情，现在对于手机webapp项目可以通过css3 伪类等方法可以实现无需js的美化（该方法写在了切图slicy框架里面）， 对于pc，我们为了确保兼容性，所以必须要用到js 了。

其中用到了jquery的wrap函数（在元素外围添加包裹代码），prepend函数（在元素开头添加代码）。

图中红色区域为已经写好js插件以后的雏形

html结构

1. <select name="" class="select ui-select">

2. <option value="综合">综合</option>

3. <option value="文化艺术业">文化艺术业</option>

4. <option value="文化、体育和娱乐业">文化、体育和娱乐业</option>

5. <option value="卫生和社会工作">卫生和社会工作</option>

6. <option value="教育">教育</option>

7. <option value="居民服务、修理和其他服务业">居民服务、修理和其他服务业</option>

8. <option value="水利、环境和公共设施管理业">水利、环境和公共设施管理业</option>

9. <option value="科学研究和技术服务业">科学研究和技术服务业</option>

10. <option value="租赁和商务服务业">租赁和商务服务业</option>

11. <option value="房地产业">房地产业</option>

12. <option value="金融业" selected="selected">金融业</option>

13. <option value="信息传输、软件和信息技术服务业">信息传输、软件和信息技术服务业</option>

14. <option value="住宿和餐饮业">住宿和餐饮业</option>

15. <option value="交通运输、仓储和邮政业">交通运输、仓储和邮政业</option>

16. <option value="批发和零售业">批发和零售业</option>

17. <option value="电力、热力、燃气及水生产和供应业">电力、热力、燃气及水生产和供应业</option>

18. <option value="制造业">制造业</option>

19. <option value="采矿业">采矿业</option>

20. <option value="农、林、牧、渔业">农、林、牧、渔业</option>

21. </select>

js代码

1. /*下拉菜单美化*/

2. $(function(){

3. $('.ui-select').each(function(){

5. var obj = $(this);

7. obj.wrap('<div class="ui-select-wrap"></div>');

8. obj.parent().prepend('<h4>'+ obj.val() +'</h4>');

11. obj.change(function(){

12. obj.parent().find('h4').html($(this).val());

13. })

14. })

15. })

花絮，一开始的html结构是这样， 是“半智能”的写法，需要手写一个满足js实现的html基本结构：

1. <div class="ui-select">

2. <h4></h4>

3. <select name="" class="select ">

4. <option value="综合">综合</option>

5. <option value="文化艺术业">文化艺术业</option>

6. <option value="文化、体育和娱乐业">文化、体育和娱乐业</option>

7. <option value="卫生和社会工作">卫生和社会工作</option>

8. <option value="教育">教育</option>

9. <option value="居民服务、修理和其他服务业">居民服务、修理和其他服务业</option>

10. <option value="水利、环境和公共设施管理业">水利、环境和公共设施管理业</option>

11. <option value="科学研究和技术服务业">科学研究和技术服务业</option>

12. <option value="租赁和商务服务业">租赁和商务服务业</option>

13. <option value="房地产业">房地产业</option>

14. <option value="金融业" selected="selected">金融业</option>

15. <option value="信息传输、软件和信息技术服务业">信息传输、软件和信息技术服务业</option>

16. <option value="住宿和餐饮业">住宿和餐饮业</option>

17. <option value="交通运输、仓储和邮政业">交通运输、仓储和邮政业</option>

18. <option value="批发和零售业">批发和零售业</option>

19. <option value="电力、热力、燃气及水生产和供应业">电力、热力、燃气及水生产和供应业</option>

20. <option value="制造业">制造业</option>

21. <option value="采矿业">采矿业</option>

22. <option value="农、林、牧、渔业">农、林、牧、渔业</option>

23. </select>

24. </div>

后来，为了代码可阅读和整洁， 最终这些基本结构的html 也通过js来添加了。

这样，红色区域h4 可以任意添加样式美化了。

原文链接：http://www.qietu.cn/thread-15205-1-1.html

------------------------------

切图网推出c4r移动适配技术服务，前端交流加切图网微信：qietuwang