如何使用select2或任何其他js在选择中搜索选项值

Posted 2023-05-07

【中文标题】如何使用select2或任何其他js在选择中搜索选项值

【英文标题】：How to search with option value in select using select2 or any other js

【发布时间】：2020-05-29 11:00:40

【问题描述】：

我正在寻找有关如何使用选项值而不是选项名称进行搜索的帮助。

示例如下：

<select name="example" id="example">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
    <option value="6">F</option>    
</select>

我想使用值 1 或 2 或 3 等而不是 A、B、C、D、E 进行搜索。

在这方面的任何帮助或任何具有此类功能的库都非常受欢迎。

谢谢

【参考方案1】：

您可以使用带有单行表达式的纯 javascript 来实现使用 addEventListener() 获取 select 值的结果，例如，

const select = document.getElementById('example');
select.addEventListener('change',() => console.log(select.value))

<select name="example" id="example">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
    <option value="6">F</option>    
</select>

【参考方案2】：

你应该收听example变化的事件

您会得到所选选项的值，如下所示

$("#example").on("change", function()
    var value = $(this).find("option:selected").val();
    console.log(value); 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="example" id="example">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
        <option value="5">E</option>
        <option value="6">F</option>
</select>

【讨论】：

这能回答你的问题吗？如果您需要任何帮助，请告诉我@Deepak Lakhara