使用JQuery实现选中<li>标签值的展示与动态更新

完整HTML结构 #

先把选项放到<ul>里（更符合语义规范），完整结构如下：

<ul>
  <li class="number" show-value="1">option 1</li>
  <li class="number" show-value="2">option 2</li>
  <li class="number" show-value="3">option 3</li>
</ul>
<div id="shownumberlist"></div>

核心jQuery代码 #

下面是实现需求的代码，每一步都加了注释，方便你理解：

// 等待页面DOM加载完成后执行代码
$(function() {
  // 给所有带.number类的li绑定点击事件
  $('.number').on('click', function() {
    // 切换当前li的选中状态：有active类就移除，没有就添加
    $(this).toggleClass('active');
    
    // 收集所有选中（带active类）的li的show-value属性值
    var selectedValues = $('.number.active').map(function() {
      // 取出当前li的show-value值
      return $(this).attr('show-value');
    }).get(); // 把map返回的jQuery对象转成普通数组
    
    // 更新展示区域的内容
    if (selectedValues.length > 0) {
      $('#shownumberlist').text('选中的数值：' + selectedValues.join(', '));
    } else {
      $('#shownumberlist').text('暂无选中数值');
    }
  });
});

可选：添加选中状态的样式 #

为了让用户直观看到哪个选项被选中，加个简单的CSS：

.number {
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  margin: 4px 0;
  border: 1px solid #ddd;
}

.number.active {
  background-color: #f0f0f0;
  font-weight: bold;
  border-color: #666;
}

关键知识点说明 #

• toggleClass('active')：jQuery的切换类方法，自动处理选中/取消状态，不用手动判断类的存在再执行添加/移除操作。
• map()：遍历选中的li，提取每个li的show-value值，最后用get()转成普通数组，方便后续拼接展示。
• join(', ')：把数组元素用逗号加空格连接成字符串，让展示内容更整洁。

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