自定义带Font Awesome图标的ul li选择框：选中项图标不显示问题

问题原因 #

你当前的jQuery代码中，点击下拉选项时使用了.text()方法更新选中区域内容，该方法仅处理纯文本，会过滤掉li标签内的Font Awesome图标HTML元素，导致选中后只显示文字、丢失图标。

解决方案 #

修改下拉选项的点击事件，改用.html()方法获取并设置完整的HTML内容，即可保留图标标签。

修改后的JavaScript代码

$('.select').click(function() {
  $(this).attr('tabindex', 1).focus();
  $(this).toggleClass('active');
  $(this).find('.select-menu').slideToggle(300);
});

$('.select').focusout(function() {
  $(this).removeClass('active');
  $(this).find('.select-menu').slideUp(300);
});

$('.select .select-menu li').click(function() {
  // 获取当前选中选项的完整HTML（包含图标和文字）
  const selectedItemHTML = $(this).html();
  // 更新选中区域的内容
  $(this).parents('.select').find('.select-inner span').html(selectedItemHTML);
});

额外注意事项 #

你的HTML代码中缺少Font Awesome样式文件引入，需在<head>标签内添加以下代码，否则图标本身无法正常显示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

完整示例代码 #

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="select">
  <div class="select-inner">
    <span><i class="fa-solid fa-hashtag"></i>Select Platform</span>
    <i class="select-icon fa-solid fa-sort-down"></i>
  </div>
  <ul class="select-menu">
    <li id="facebook"><i class="fa-brands fa-facebook-f"></i>Facebook</li>
    <li id="Instagram"><i class="fa-brands fa-instagram"></i>Instagram</li>
  </ul>
</div>

CSS（保持不变）

.select {
  background-color: rgb(255, 255, 255);
  width: 300px;
  height: 70px;
  position: relative;
  display: inline-block;
  border-radius: 50px;
  margin-top: 25px;
}

.select .select-inner {
  width: 100%;
  line-height: 70px;
  border: 0;
  padding: 0 20px;
  list-style: none;
  border-radius: 50px;
  cursor: pointer;
  padding: 0;
}

.select .select-inner:focus {
  outline: none;
}

.select ul {
  overflow: hidden;
  position: absolute;
  left: 0;
  list-style: none;
  cursor: pointer;
  display: none;
  overflow-y: auto;
  width: 100%;
  margin-top: 10px;
  line-height: 50px;
  min-height: 50px;
  background-color: inherit;
  border: 0;
}

.select:focus-visible {
  outline: none;
}

.select .select-inner .select-icon {
  position: absolute;
  left: calc(100% - 32px);
  line-height: 70px;
}

.select .select-inner i,
.select .select-menu i {
  background-image: -moz-linear-gradient(14deg, rgb(103, 23, 205) 0%, rgb(40, 113, 250) 60%);
  background-image: -webkit-linear-gradient(14deg, rgb(103, 23, 205) 0%, rgb(40, 113, 250) 60%);
  background-image: -ms-linear-gradient(14deg, rgb(103, 23, 205) 0%, rgb(40, 113, 250) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 15px;
  margin-right: 15px;
}

.select .select-inner span,
.select .select-menu {
  font-size: 18px;
  color: rgb(27, 27, 27);
  padding: 0 20px;
}

JavaScript（修改后的版本）

$('.select').click(function() {
  $(this).attr('tabindex', 1).focus();
  $(this).toggleClass('active');
  $(this).find('.select-menu').slideToggle(300);
});

$('.select').focusout(function() {
  $(this).removeClass('active');
  $(this).find('.select-menu').slideUp(300);
});

$('.select .select-menu li').click(function() {
  const selectedItemHTML = $(this).html();
  $(this).parents('.select').find('.select-inner span').html(selectedItemHTML);
});

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