如何在自定义样式下拉列表中隐藏Select占位符选项

我明白你遇到的困扰了——这个自定义下拉组件是通过jQuery模拟原生<select>实现的，原生的<option>被隐藏了，用户实际看到的是生成的<ul class="options">列表。所以直接给原生第一个选项加disabled或hidden属性不会生效，得从模拟列表的生成逻辑入手修改。

解决方案：跳过占位符选项的生成 #

有两种常用的方式实现，你可以根据需求选择：

方式1：直接跳过第一个选项（硬编码） #

因为你的占位符是第一个选项，所以在生成<li>的时候，从索引1开始循环，不生成第一个选项对应的列表项：

修改jQuery中生成列表项的循环部分：

// 原来的循环（从i=0开始）
// for(var i = 0; i < numberOfOptions; i++) {
//   $('<li />', { text: $this.children('option').eq(i).text() }).appendTo($list);
// }

// 修改后的循环（从i=1开始）
for(var i = 1; i < numberOfOptions; i++) {
  $('<li />', { text: $this.children('option').eq(i).text() }).appendTo($list);
}

方式2：根据原生option的disabled属性跳过（更灵活） #

如果以后你的占位符可能不是第一个，或者有其他需要隐藏的禁用选项，可以判断原生option是否为disabled，再决定是否生成对应的列表项：

修改后的循环代码：

for(var i = 0; i < numberOfOptions; i++) {
  var $currentOption = $this.children('option').eq(i);
  // 只生成未禁用的选项对应的列表项
  if (!$currentOption.is(':disabled')) {
    $('<li />', { text: $currentOption.text() }).appendTo($list);
  }
}

这种方式下，你只需要给原生的占位符option加上disabled属性，代码就会自动跳过它：

<select>
  <option disabled>Select an option...</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

补充：确保下拉触发文本正常显示 #

不管用哪种方式，原来的代码里$styledSelect.text($this.children('option').eq(0).text())这行是用来设置初始显示的占位符文本，这部分可以保留，因为它只是显示触发按钮的文本，不会出现在下拉列表里。

修改后的完整jQuery代码 #

var numberOfSelects = $('select').length; 
// Iterate over each select element 
$('select').each( function() { 
  // Cache the number of options 
  var $this = $(this), numberOfOptions = $(this).children('option').length; 

  // Hides the select element 
  $this.addClass('hidden'); 

  // Wrap the select element in a div 
  $this.wrap('<div class="select" />'); 

  // Insert a styled div to sit over the top of the hidden select element 
  $this.after('<div class="styledSelect"></div>'); 

  // Cache the styled div 
  var $styledSelect = $this.next('div.styledSelect'); 

  // Show the first select option in the styled div 
  $styledSelect.text($this.children('option').eq(0).text()); 

  // Insert an unordered list after the styled div and also cache the list 
  var $list = $('<ul />', { 'class' : 'options' }).insertAfter($styledSelect); 

  // Insert a list item into the unordered list for each select option
  // --- 修改这里 ---
  for(var i = 1; i < numberOfOptions; i++) { 
    $('<li />', { text: $this.children('option').eq(i).text() }).appendTo($list); 
  } 

  // Cache the list items 
  var $listItems = $list.children('li'); 

  // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again) 
  $styledSelect.click( function(e) { 
    e.stopPropagation(); 
    $('div.styledSelect.active').each( function() { 
      $(this).removeClass('active') 
        .next('ul.options').filter(':not(:animated)').slideUp(250); 
    }); 

    $(this).toggleClass('active') 
      .next('ul.options').filter(':not(:animated)').slideToggle(250); 
  }); 

  // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item 
  // Updates the select element to have the value of the equivalent option 
  $listItems.click( function(e) { 
    e.stopPropagation(); 
    $styledSelect.text($(this).text()) 
      .removeClass('active'); 
    $this.val($(this).text().toLowerCase()); 
    $list.filter(':not(:animated)').slideUp(250); 
  }); 

  // Hides the unordered list when clicking outside of it 
  $(document).click( function() { 
    $styledSelect.removeClass('active'); 
    $list.filter(':not(:animated)').slideUp(250); 
  }); 
});

内容的提问来源于stack exchange，提问作者obiboke