模仿combox(select)控件，不用为美化select烦恼了。

下面我将详细讲解如何模仿combox(select)控件，不用为美化select烦恼的完整攻略。

一、前言

在前端开发中，常常会遇到需要美化select控件的情况，而原生的select控件却难以满足我们的需求。本篇攻略将教你如何使用HTML、CSS和JavaScript制作一个类似于combox(select)控件的效果，同时保留原生select的所有功能。

二、制作步骤

在制作过程中我们需要依次完成以下步骤：

1. 隐藏原生select

首先，我们需要将原生的select控件先隐藏起来，使用CSS的display: none属性即可。

.select-wrap select{
    display: none;
}

2. 显示虚拟控件

然后，我们需要将一个虚拟的控件显示出来，让用户看到这个控件并进行操作。本案例中，我们可以使用HTML的<div>标签来代替。

<div class="select-wrap">
    <div class="select-display"></div>
    <ul class="select-list">
        <!--下拉列表项-->
    </ul>
</div>

3. 动态生成下拉列表

接着，我们需要动态生成下拉列表，使用JavaScript中的innerHTML属性可以轻松实现。

var selectObj = document.getElementById("selectObj");
var optionObj = selectObj.getElementsByTagName("option");
var selectList = document.getElementById("selectList");
var selectDisplay = document.getElementById("selectDisplay");
var selectWrap = document.getElementById("selectWrap");

for (var i = 0; i < optionObj.length; i++) {
    var liObj = document.createElement("li");
    liObj.innerHTML = optionObj[i].innerHTML;

    liObj.onclick = function() {
        selectDisplay.innerHTML = this.innerHTML;
        for (var j = 0; j < optionObj.length; j++) {
            if (this.innerHTML == optionObj[j].innerHTML) {
                selectObj.selectedIndex = j;
                break;
            }
        }
        selectList.style.display = "none";
    };
    selectList.appendChild(liObj);
}

4. 显示/隐藏下拉列表的效果

最后，我们需要添加点击事件，控制下拉列表的显示/隐藏效果。具体可以使用JavaScript中的style.display属性来实现。

selectDisplay.onclick = function() {
    selectList.style.display == "" || selectList.style.display == "none" ?
        selectList.style.display = "block" :
        selectList.style.display = "none";
};
selectWrap.onmouseleave = function() {
    selectList.style.display = "none";
};

三、示例说明

1. 使用纯CSS去除select控件的默认样式

select {
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    border: none;
    background-color: inherit;
    font: inherit;
    outline: none;
    padding-right:30px;
    background-image: url("images/icon-select.png");
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
}

2. Bootstrap样式化select

<div class="form-group">
    <label for="select" class="control-label">Select</label>
    <select id="select" class="form-control">
        <option value="">请选择</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
    </select>
</div>

$('.selectpicker').selectpicker({
    style: 'btn-default',
    size: 4
});

四、总结

本攻略中，我们通过HTML、CSS和JavaScript三者的结合编写一个类似于combox(select)控件的效果，让大家在不需要为美化select烦恼。同时，我们也展示了两个实用的示例，希望能对大家有所帮助。