模拟select标签

模拟select标签

select标签

代码

<select id="dateSelect">
    <option value="2018-12-11">2018-12-11</option>
    <option value="2018-12-10">2018-12-10</option>
    <option value="2018-12-09">2018-12-09</option>
    <option value="2018-12-08">2018-12-08</option>
    <option value="2018-12-11">2018-12-11</option>
    <option value="2018-12-10">2018-12-10</option>
    <option value="2018-12-09">2018-12-09</option>
    <option value="2018-12-08">2018-12-08</option>
    <option value="2018-12-11">2018-12-11</option>
    <option value="2018-12-10">2018-12-10</option>
    <option value="2018-12-09">2018-12-09</option>
    <option value="2018-12-08">2018-12-08</option>
    <option value="2018-12-11">2018-12-11</option>
    <option value="2018-12-10">2018-12-10</option>
    <option value="2018-12-09">2018-12-09</option>
    <option value="2018-12-08">2018-12-08</option>
    <option value="2018-12-11">2018-12-11</option>
    <option value="2018-12-10">2018-12-10</option>
    <option value="2018-12-09">2018-12-09</option>
    <option value="2018-12-08">2018-12-08</option>
    <option value="2018-12-11">2018-12-11</option>
    <option value="2018-12-10">2018-12-10</option>
    <option value="2018-12-09">2018-12-09</option>
    <option value="2018-12-08">2018-12-08</option>
</select>

效果

• 当option过长时，无法限制在多少个内就显示滚动条，会造成滚动内容过长

模拟select

代码

• html

<div class="select_box">
    <input id="txtSelect" type="text" value="请选择..." readonly="readonly" />
    <ul>
        <li>选项01</li>
        <li>选项02</li>
        <li>选项03</li>
        <li>选项04</li>
        <li>选项05</li>
        <li>选项06</li>
        <li>选项07</li>
        <li>选项08</li>
        <li>选项09</li>
    </ul>
</div>

• css

*{
  box-sizing: border-box;
}
.select_box {
  width: 180px;
  position: relative;
}

.select_box input {
  outline: none;
  width: 100%;
  height: 25px;
  line-height: 25px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #ccc;
  padding: 0 20px 0 10px;
  background: #fff url(../img/select_input_bg.gif) no-repeat 160px center;
}

.select_box ul {
  width: 100%;
  margin: 0px;
  padding: 0px;
  position: absolute;
  left: 0;
  top: 25px; /**等于input的高度**/
  border: 1px solid #ccc;
  background: #fff;
  overflow: hidden;
  display: none; 
  background: #ebebeb;
  z-index: 99999;
}

.select_box ul li {
  list-style-type: none;
  width: 100%;
  height: 30px;
  line-height: 30px;
  display: block;
  overflow: hidden;
  padding-left: 10px; /**设置li离左边的距离**/
  cursor: pointer;
}
.hover {
  background: #ccc;

• js

$(function () {
    $(".select_box input").click(function () {
        var input = $(this);
        var ul = input.next("ul");
        if (ul.is(":hidden")) {//判断是否隐藏
            if (ul.height() > 150) {//根据你要显示的li的个数确定
                ul.css({ height: "150px", "overflow-y": "scroll" });
            };
            ul.fadeIn("100");
            ul.hover(function () { }, function () { ul.fadeOut("100"); });
            ul.children("li").click(function () {
                input.val($(this).text());
                ul.fadeOut("100");
            }).hover(function () { $(this).addClass("hover"); }, function () {
                $(this).removeClass("hover");
            });
        }
        else {
            ul.fadeOut("fast");
        }
    });
});

效果

• 可控制多少个，就显示滚动条