引一个jquery。


CSS：


body{

margin:0;

padding: 0;

font: 14px "微软雅黑";

background-color: #bc5122;

color: #fff;

}

.box{

padding-top: 50px;

width: 30%;

height: auto;

margin: 0 auto;

}


p,ul,li{

list-style: none;

padding: 0;

margin: 0;

}

.select{

position: relative;

width: 100%;

height: 40px;

margin: 20px 0;

}

.select_text{

overflow: auto;

cursor: pointer;

border-radius: 5px;

background-color: rgba(0,0,0,.5);

}

.options>.selected{

background-color:#2e6bc7;

color: #fff;

line-height: 40px;

padding-left: 10px;

 

}

.select_text>p{

padding-left: 10px;

line-height: 40px;

float: left;

}

.select_icon{

float: right;

height: 40px;

padding: 0 20px;

}

.select_icon>div{

width: 10px;

height: 10px;

border-left: 1px solid #fff;

border-bottom: 1px solid #fff;

transform: rotate(-45deg);

margin-top: 12px;

}

.options{

position: absolute;

width: 100%;

top: 40px;

background-color:rgba(0,0,0,.5);

border-top: 1px solid #000;

    border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

display: none;

}

.option{

line-height: 40px;

padding-left: 10px;

color: #ffffff;

}

.option:hover{

background-color: #acacac;

cursor: pointer;

color: #fff;

}

@keyframes play{

0%{transform: scale(1,0);}

25%{transform: scale(1,1.2);}

50%{transform: scale(1,0.85);}

75%{transform: scale(1,1.05);}

100%{transform: scale(1,1);}

}

.open>.options{

display: block;

z-index: 999;

transform-origin: 50% 0;

animation: play .5s ease-in;

}

.open>.select_text>.select_icon>div{

margin-top: 18px;

transform: rotate(135deg);

}

.open>.select_text{

border-bottom-left-radius:0px;

border-bottom-right-radius:0px;

}


HTML：


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

<link href="pc_select.css" type="text/css" rel="stylesheet" media="(min-width:600px)"/>

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

</head>

<body>

 <div class="box">

   <!--<div class="select">

     <div class="select_text">

        <p>请选择</p>

        <div class="select_icon">

            <div></div>

        </div>

     </div>

     <ul class="options">

        <li class="selected">请选择</li>

        <li class="option">选项一</li>

        <li class="option">选项二</li>

        <li class="option">选项三</li>

     </ul>

   </div>

   <div class="select">

     <div class="select_text">

        <p>请选择</p>

        <div class="select_icon">

            <div></div>

        </div>

     </div>

     <ul class="options">

        <li class="selected">请选择</li>

        <li class="option">选项一</li>

        <li class="option">选项二</li>

        <li class="option">选项三</li>

     </ul>

   </div>-->

 </div>

 <script>

   var createSelect=function(parentNode){

    $(parentNode).html(function(i,h){

    return h+='<div class="select"><div class="select_text"><p>请选择</p><div class="select_icon"><div></div></div></div><ul class="options"><li class="selected">请选择</li><li class="option">选项一</li><li class="option">选项二</li><li class="option">选项三</li></ul></div>'

           });

   }

    

   createSelect(".box");

   createSelect(".box");

   createSelect(".box");

   createSelect(".box");

   createSelect(".box");


  $(".select").click(function(e){

  $(this).toggleClass("open");

  $(this).siblings(".select").removeClass("open");

  //$(".select:not($(this))").removeClass("open");

  e.stopPropagation();

  });

  $(".options>li").click(function(e){

  $(this).addClass("selected").removeClass("option");

  $(this).siblings().removeClass("selected").addClass("option");

  $(".open>.select_text>P").text($(this).text());

  $(".select").removeClass("open");

  e.stopPropagation();

  });

  $(document).click(function(){

  $(".select").removeClass("open");

  });

 

 </script>

</body>

</html>