如何实现ul li模拟SELECT下拉功能，点击时select option值不为空

安全阿岳

2026-9-24

解决方案

问题原因

你当前代码的问题是第一个点击事件绑定了.selected-change下的所有li元素，包括用于触发下拉展开的.init节点。点击.init节点时，它没有data-val属性，所以会给select赋值为undefined，导致select的option变成空值。

修改方案

把第一个点击事件的触发范围限定到非.init的li节点即可，还可以额外加一层合法性校验，进一步避免空值情况，无需调整其他逻辑。
修改后的JS代码如下：

// 只给非.init的li绑定赋值逻辑
$('.selected-change li:not(.init)').click(function () {
  const selectVal = $(this).data('val');
  // 加校验，只有值存在且select有对应option时才赋值
  if(selectVal && $('#city option[value="'+selectVal+'"]').length) {
    $('#city').val(selectVal).trigger('change');
  }
});


$("ul").on("click", ".init", function() {
  $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
  allOptions.removeClass('selected');
  $(this).addClass('selected');
  $("ul").children('.init').html($(this).html());
  allOptions.toggle();
});