在切图网（qietu.com）一个项目中 需要涉及到 下拉菜单美化，做过前端的人都知道，网页中有几大元素 是css美化不了的，是作为开发者来讲的比较苦恼的事情，现在对于手机webapp项目可以通过css3 伪类等方法可以实现无需js的美化（该方法写在了切图slicy框架里面）， 对于pc，我们为了确保兼容性，所以必须要用到js 了。
其中用到了jquery的wrap函数（在元素外围添加包裹代码），prepend函数（在元素开头添加代码）。
图中红色区域为已经写好js插件以后的雏形
html结构
js代码
/*下拉菜单美化*/
$(function(){
$('.ui-select').each(function(){
var obj = $(this);
obj.wrap('
');obj.parent().prepend('
'+ obj.val() +'
');obj.change(function(){
obj.parent().find('h4').html($(this).val());
})
})
})
花絮，一开始的html结构是这样， 是“半智能”的写法，需要手写一个满足js实现的html基本结构：
后来，为了代码可阅读和整洁， 最终这些基本结构的html 也通过js来添加了。
这样，红色区域h4 可以任意添加样式美化了。
原文链接：
http://www.qietu.cn/thread-15205-1-1.html
------------------------------
切图网推出c4r移动适配技术服务，前端交流加切图网微信：qietuwang