获取特定列表<li>项的值[重复]答案

【问题标题】：Getting the value of specific list <li> items [duplicate]获取特定列表<li>项的值[重复]
【发布时间】：2021-03-01 14:23:00
【问题描述】：

我的网站上有多个选择选项。 Chosen 将选定的值保存到列表中

现在我需要获取这些选定的值以将它们保存到数据库中。我找到了document.getElementsByTagName('li') 的解决方案，但这得到了我所有的li 项目，包括我现在不需要的选择选项。如何指定我要查找的li/ul？

这里是我当前的JavaScript 状态：

function() {
  var elementsLI = document.getElementsByTagName('li');
  var length = document.getElementsByTagName('li').length;
  for (var i = 0; i <= length; ++i) {
    alert(elementsLI[i].value);
  }
}

<ul class="chosen-choices">
  <li class="search-choice"><span>Erdnuss</span></li>
  <li class="search-choice"><span>Andorra</span></li>
  <li class="search-choice"><span>Anguilla</span></li>
</ul>

【问题讨论】：

但是你所期望的li到底是什么？
那么我们应该如何知道选择了什么？如果他们在选择中，他们是否都被选中？
使用 UI 获取您需要的数据是一种不好的做法，因为该层应仅用于演示。您应该对数据进行建模并使其与任何 UI 实现分离。如果您要创建完整用例的有效 sn-p，我将为您举一个例子
stackoverflow.com/questions/15403220/…

标签： javascript html jquery-chosen

【解决方案1】：

您的问题是 X/Y 问题

您显示呈现的 CHOSEN UL，而不是带有可运行选择的代码。

这里是如何获取chosen 多选的值。您可以像在普通选择中一样使用 .val()

$("#sel")
.chosen()
.on("change",function() {
 console.log($(this).val())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" />

<select id="sel" multiple>
  <option value="Erdnuss">Erdnuss</option>
  <option value="Andorra">Andorra</option>
  <option value="Anguilla">Anguilla</option>
</select>

【讨论】：

【解决方案2】：

document.querySelectorAll(".search-choice").forEach(choice => {
  console.log(choice.firstChild.textContent)
})

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请编辑您的答案以添加解释并说明适用的限制和假设。