<div class="custom-select">
  <div class="select-selected">请选择</div>
  <div class="select-options">
    <div class="select-option">选项1</div>
    <div class="select-option">选项2</div>
    <div class="select-option">选项3</div>
  </div>
</div>
<select id="hidden-select" name="hidden-select" style="display: none;">
  <option value="选项1">选项1</option>
  <option value="选项2">选项2</option>
  <option value="选项3">选项3</option>
</select>

.custom-select {
  position: relative;
  display: inline-block;
}

.select-selected {
  background-color: #f1f1f1;
  padding: 10px;
  cursor: pointer;
}

.select-options {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.select-option {
  padding: 12px 16px;
  cursor: pointer;
}

.select-option:hover {
  background-color: #f1f1f1;
}

var selectSelected = document.querySelector('.select-selected');
var selectOptions = document.querySelector('.select-options');
var hiddenSelect = document.getElementById('hidden-select');

selectSelected.addEventListener('click', function() {
  selectOptions.style.display = 'block';
});

selectOptions.addEventListener('click', function(e) {
  if (e.target.classList.contains('select-option')) {
    selectSelected.textContent = e.target.textContent;
    hiddenSelect.value = e.target.textContent;
    selectOptions.style.display = 'none';
  }
});