ul+jquery自定义下拉选择框

下面是一个基于ul和jquery的自定义下拉选择框的示例：

HTML代码：

<div class="select-wrapper">
  <input type="hidden" name="select" value="">
  <div class="select-box">请选择</div>
  <ul class="select-options">
    <li data-value="1">选项1</li>
    <li data-value="2">选项2</li>
    <li data-value="3">选项3</li>
    <li data-value="4">选项4</li>
  </ul>
</div>

CSS代码：

.select-wrapper {
  position: relative;
  width: 200px;
  font-size: 14px;
  color: #333;
}

.select-box {
  position: relative;
  z-index: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}

.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.select-options li {
  padding: 10px;
  cursor: pointer;
}

.select-options li:hover {
  background-color: #f5f5f5;
}

JS代码：

$(function() {
  $('.select-box').click(function() {
    $(this).siblings('.select-options').toggle();
  });

  $('.select-options li').click(function() {
    var value = $(this).data('value');
    var text = $(this).text();
    $(this).closest('.select-wrapper').find('input[type="hidden"]').val(value);
    $(this).closest('.select-wrapper').find('.select-box').text(text);
    $(this).closest('.select-options').hide();
  });

  $(document).click(function(event) {
    if (!$(event.target).closest('.select-wrapper').length) {
      $('.select-options').hide();
    }
  });
});

该示例中，使用了一个包含隐藏输入框、下拉框按钮和下拉选项的`div`容器作为自定义下拉选择框的外层容器。下拉框按钮(`.select-box`)用于打开或关闭下拉选项(`.select-options`)，下拉选项为一个`ul`列表，其中每个选项(`li`)都有一个`data-value`属性表示选项的值。

当用户点击某个选项时，使用jQuery将选项的值和文本分别设置到隐藏输入框和下拉框按钮中，并隐藏下拉选项。

当用户点击页面其它位置时，使用jQuery隐藏所有下拉选项。