jQuery中如何从datalist获取单个对应值，避免多值拼接？

当datalist里存在多个value相同的<option>时，用jQuery的text()方法获取匹配元素的文本，会把所有匹配项的文本拼接在一起——比如选中"C-Suite"时，会返回"AC1AC2"，而我们需要只获取其中单个值（AC1或AC2）。

问题根源 #

$("#JobPositionsLst option[value='xxx']")会选中所有符合条件的option元素，调用text()时，jQuery会自动把这些元素的文本内容拼接成字符串返回。

解决方案 #

可以通过以下两种方式获取单个值：

1. 获取第一个匹配的选项文本

修改JS代码，使用.first()方法只选取第一个匹配的option元素：

$(document).on('change', '#dataListOption', function () {
  const selectedValue = $('#dataListOption').val();
  const targetText = $("#JobPositionsLst option[value='" + selectedValue + "']").first().text();
  $("#result").val(targetText);
  console.log('IdData', targetText);
});

2. 随机获取其中一个选项文本

如果需要随机返回AC1或AC2，可以先获取所有匹配的option，再随机选一个：

$(document).on('change', '#dataListOption', function () {
  const selectedValue = $('#dataListOption').val();
  const options = $("#JobPositionsLst option[value='" + selectedValue + "']");
  if (options.length > 0) {
    const randomIndex = Math.floor(Math.random() * options.length);
    const targetText = options.eq(randomIndex).text();
    $("#result").val(targetText);
    console.log('IdData', targetText);
  }
});

完整代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" list="JobPositionsLst" id="dataListOption" placeholder="Job...">
<datalist id="JobPositionsLst">
    <option value="C-Suite">AC1</option>
    <option value="C-Suite">AC2</option>
    <option value="Coordinator">COR</option>
    <option value="Administrator">ADM</option>
    <option value="Manager">MAN1</option>
</datalist>
<br>
<hr>  
<h5>处理后的结果：</h5>
<input type="text" id="result" readonly>

<script>
$(document).on('change', '#dataListOption', function () {
  const selectedValue = $('#dataListOption').val();
  // 选择方案1或方案2，注释掉另一个即可
  // 方案1：取第一个匹配项
  const targetText = $("#JobPositionsLst option[value='" + selectedValue + "']").first().text();
  
  // 方案2：随机取一个
  // const options = $("#JobPositionsLst option[value='" + selectedValue + "']");
  // const targetText = options.eq(Math.floor(Math.random() * options.length)).text();
  
  $("#result").val(targetText);
  console.log('IdData', targetText);
});
</script>

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