如何通过jQuery获取<li>文本内容而非其value属性值并存储到变量

嘿，我明白你的需求了——你现在点击

里的
• 时，拿到的是它的value属性值，但实际想要的是
• 标签里的文本内容（比如"ROlce royce"或者"Mercedese"）对吧？咱们来调整一下代码就能搞定：

  问题出在哪？ #

  你之前用event.target.value获取的是

• 上自定义的value属性值，但
• 本身的文本内容需要用jQuery的.text()方法来获取。另外你代码里的$("#subcategorytwo").text(event.target.value)这行是错误的，它是在修改整个
  的文本内容，完全不是你要的操作。

  修正后的完整代码 #

  <ul name="subcategorytwo" id="subcategorytwo" style="list-style: none;"> 
      <li value="1">ROlce royce</li> 
      <li value="2">Mercedese</li> 
  </ul>
  <!-- 假设你有对应的select和input元素 -->
  <select></select>
  <input type="text" id="fetchvalue">
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $('#subcategorytwo').on('click', function(event) { 
      // 确保只有点击<li>元素时才执行操作（避免点击ul空白区域触发）
      if ($(event.target).is('li')) {
          // 获取被点击<li>的文本内容，trim()可选，用来去除文本前后的空格
          var selectedText = $(event.target).text().trim();
          // 如果需要同时拿到value属性值，也可以这样获取
          var selectedValue = $(event.target).attr('value');
  
          // 把选项添加到select中，用模板字符串比传统拼接更清晰
          $("select").append(`<option value="${selectedValue}">${selectedText}</option>`); 
  
          // 将文本内容放入#fetchvalue输入框
          $('#fetchvalue').val(selectedText); 
      }
  }); 
  </script>
  

  关键说明 #

  • $(event.target).text()：这是核心操作，专门用来获取被点击
  • 内部的纯文本内容。
  • 新增的if判断：因为事件绑定在
    上，点击
    空白区域也会触发事件，这个判断能确保只有点击
    • 时才执行逻辑，避免不必要的错误。
    • 模板字符串（${变量}）：相比传统的字符串拼接写法，可读性更强，也不容易出现引号嵌套的问题。

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