从 jquery 中的 datalist 中仅获取一个具有 2 个相同文本的值答案

【问题标题】：Getting just one value with 2 same text from datalist in jquery从 jquery 中的 datalist 中仅获取一个具有 2 个相同文本的值
【发布时间】：2022-08-16 19:40:47
【问题描述】：

我正在尝试仅获取具有一个值的行，但我使用相同的 text() 获取 2 个值或更多值，因为要求与 text() 一起。

编辑代码： https://codepen.io/Dragonbl4ck/pen/BarOdvQ

$(document).on(\'change\', \'#dataListOption\', function () {
$(\"#result\").val($(\"#JobPositionsLst option[value=\'\" + $(\'#dataListOption\').val() + \"\']\").text());
});
//Help me please i just want one ID
//if you select C-Suite you get 2 ID\'s together (AC1AC2)
//Expected result is: AC1 or AC2

<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>The result is repeated with 2 id together:</h5>
    <input type=\"text\" id=\"result\" readonly>

我通过以下方式获取数据：

    IdData = $(\"#JobPositionsLst option[value=\'\" + $(\'#dataListOption\').val() + \"\']\").text();

让我告诉你结果：

console.log(\'IdData\',IdData) 
IdData: AC1AC2

但我只得到一个值：

IdData: AC1 or  IdData: AC2

谢谢你。

它应该如何知道使用哪一个？为什么你首先有重复的值？
@Barmar 这是先生项目的要求。
我不认为有任何方法可以做到这一点。 <datalist> 不像 <select>，没有选择的选项。请记住，这些只是建议值，用户不必从列表中进行选择。如果用户手动输入C-Suite 会发生什么，没有办法知道他指的是哪一个。

标签： javascript html jquery datalist html-datalist

【解决方案1】：

只需在任何（C-Suite）值中添加空格即可。如果您有两个，它会根据它们的值查找元素。

$(document).on('change', '#dataListOption', function () {
  $("#result").val($("#JobPositionsLst option[value='" + $('#dataListOption').val() + "']").text());
});
//Help me please i just want one ID
//if you select C-Suite you get 2 ID's together (AC1AC2)
//Expected result is: AC1 or AC2

<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>The result is repeated with 2 id together:</h5>
<input type="text" id="result" readonly>

【讨论】：