How to search with option value in select using select2 or any other js

Question

I am looking some help on how to search with option value instead of option name.

Here is the example:

<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>

I want to search with value 1 or 2 or 3 etc not with the A,B,C,D,E..

Any help in this regard is much appriciated or any library which has such functionality.

Thanks

Answer 1

1. You should listen to the event on the change of example

2. You get the value of the selected option like below

$("#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>

Answer 2

You can achieve the result of fetching the select value with addEventListener() using pure javascript with single line expression like,

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>