Home>
I want to get all the option items of the combo box and compare them.

Use jq to get all combo box (datalist) values,
I would like to compare it with the value in the text box.

I tried to get the value like the select box, but I am not able to get it well and am in trouble.

The option items are created dynamically, so I'm making a new list and comparing them.

I'm new to jq and I'm a beginner, so I think it's strange, but please tell me.
Thanks for your consideration.

Applicable source code
<script>
   function myfunc() {
         var list = [];
         var times = $('#data').children();
         console.log(times);
         for (var i=0;i<times.length;i++) {
            list.push($(this).text());
         }
         console.log(list);
         var newdata = $("#data").val();
         for (var i=0;i<list.length;i++) {
            if (list === newdata){
             console.log("same");
            }else{
             console.log("not");
            }
         }
     }
</script>
<input type="text" list="datalist" onchange="myfunc()">
<datalist>
 <option value="1">1000</option>
 <option value="2">1100</option>
 <option value="3">1200</option>
 <option value="4">1300</option>
 <option value="5">1400</option>
</datalist>
  • Answer # 1

    >Get all the option items of the combo box

    Is this something?

           var times = $('#datalist').children();
             for (var i=0;i<times.length;i++) {
                list.push($(times[i]).text());
             }

  • Answer # 2

    Is it like this?

    <script>
    $(function(){
      $('#data').on('change',function(){
        var val=$(this).val();
        var list=$("#"+$(this).attr('list')).find('option').map(function(){
          return $(this).val();
        }).get();
        var match=list.map(function(x){
          return x==val? "same": "not";
        });
        console.log(list);
        console.log(match);
      });
    });
    </script>
    <input type="text" id="data" list="datalist">
    <datalist id="datalist">
    <option value="1">1000</option>
    <option value="2">1100</option>
    <option value="3">1200</option>
    <option value="4">1300</option>
    <option value="5">1400</option>
    </datalist>