硬编码下拉框用法

前言

在Web开发中，下拉框是常常用到的一个组件，通常我们会使用一些插件库来导入下拉框的JS和CSS文件，但也可以通过硬编码的方式来实现下拉框，这种方式简单易懂，不需要安装插件库，也不需要引用JS和CSS文件，如果只有个别页面需要使用下拉框也可以非常方便。

实现原理

下拉框是由HTML select 和 option 标签组成的，通常我们使用JS和CSS来美化下拉框，但实际上我们可以通过CSS控制select的样式来美化它。通常我们将select标签隐藏，然后通过自定义样式的div标签来模拟下拉框的样式，列表内容则通过多个option标签来自定义。

实现步骤

1. 在HTML中定义一个select标签，并设置display:none属性，隐藏下拉框。

<select id="mySelect" style="display:none;">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

2. 定义一个div标签用于模拟下拉框的样式，并在CSS中设置自定义的样式。

<div class="mySelect-box">
  <span class="mySelect-option">-请选择-</span>
  <i class="fa fa-angle-down"></i>
  <ul class="mySelect-list">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
</div>

.mySelect-box {
  position: relative;
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  cursor: pointer;
  width: 120px;
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
}

.mySelect-option {
  margin-right: 24px;
}

.mySelect-list {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
  box-sizing: border-box;
  background: #fff;
  border-top: none;
  display: none;
  z-index: 9999;
}

.mySelect-list li {
  list-style: none;
  padding: 0 8px;
  height: 32px;
  line-height: 32px;
  box-sizing: border-box;
  cursor: pointer;
}

.mySelect-list li:hover {
  background: #ddd;
}

3. 使用jQuery或者原生JS实现下拉框的交互效果。

$(function() {
  var $select = $('#mySelect');
  var $box = $('.mySelect-box');
  var $option = $('.mySelect-option');
  var $list = $('.mySelect-list');
  var $lis = $list.find('li');
  
  $option.on('click', function(e) {
    e.stopPropagation();
    $list.show();
  });
  
  $lis.on('click', function() {
    var val = $(this).text();
    $option.text(val);
    $select.val(val);
    $list.hide();
  });
  
  $(document).on('click', function() {
    $list.hide();
  });
});

总结

硬编码下拉框虽然不如使用插件库来的方便和高效，但却可以在一些小型项目中使用，实现起来也非常简单。如果仅有少量下拉框需要使用，可以考虑使用这种方式。