jquery自定义下拉框样式，选择后 下面内容跟着变化

<script src="jquery-1.7.2.min.js"></script>

<script type="text/javascript">

$(function(){

$(".select1 img").click(function(){$(this).next("ul").show();});

$(".select1 ul ").click(function(){$(this).hide();});

$(".select1 ul li").click(function(){  $(".select1 input").val($(this).html());

var coo=$(this).attr("co");

$("."+coo).show().siblings().hide();;

});

});

</script>

<style>

/*select*/

.select1{width:287px; height:24px; background:#dedede; color:#000; position:relative; margin-bottom:10px;}

.select1 input{ border-style:none;width:254px;height:24px;background:#dedede;padding-left:5px; }

.select1 ul{display:none;width:287px;;background:#dedede;}

.select1 ul li{ border-bottom:1px solid #ccc;border-top:1px solid #f2f2f2;cursor:pointer;padding-left:5px;}

.select1 img{ position:absolute; right:0px; cursor:pointer;}

</style>

<div class="select1">

  <input type="text" value="封面女郎明星式写真" /><img src="{dede:global.cfg_templets_skin/}/images1/f-price1_03.jpg"  />

  <ul><li co="c1"> 封面女郎明星式写真</li>

  <li co="c2">女郎明星</li> <li co="c3">女郎明星1</li> <li co="c4">女郎明星2</li> <li co="c5">女郎明星3</li>

  </ul>

  </div>

  <div class="select_content">

  <div class="c1 ">11</div>

  <div class="c2 hidden">22</div>

  <div class="c3 hidden">33</div>

  <div class="c4 hidden">44</div>

  <div class="c5 hidden">55</div>

  </div>