ul+jsシミュレーションselect+改良

html:

<div class="select_box">

                        <input type="text" value=" " readonly="readonly">

                        <ul class="select_ul cur" style="display: none;">

                          <li class="sel_value"> </li>

                          <li class="sel_value"> </li>

                          <li class="sel_value"> </li>

                          <li class="sel_value"> </li>

                          <li class="sel_value"> </li>

                          <li class="sel_value"> </li>

                        </ul>

                      </div>

css:

/* select*/

.select_box{

  float: left;

}

.select_box input{

  width: 160px;

  height: 30px;

  text-align: center;

  font-size: 18px;

  color: #444;

}

.select_ul{

  font-size: 14px;

  text-align: center;

  border: 1px solid #D2D3D3;

  position: absolute;

  top:29px;

}

.select_ul li{

  height: 50px;

  line-height: 50px;

}

.select_ul.cur li:hover{

  background-color: #4EC0EC;

}

js:

  // select

  $(".select_box input").click(function(){

    var thisinput=$(this);

    var thisul=$(this).parent().find("ul.select_ul");

    if(thisul.css("display")=="none"){

//        if(thisul.height()>200){thisul.css({height:"200"+"px","overflow-y":"scroll" })};

      thisul.fadeIn("100");

      thisul.hover(function(){},function(){thisul.fadeOut("100");})

      thisul.find("li.sel_value").on('click',function(event){

        alert($(event.target).text());

        thisinput.val($(this).text());thisul.fadeOut("100");}).hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});

    }

    else{

      thisul.fadeOut("fast");

    }

  })