Setting hidden datalist option values

Question

In the snippet below, I have two methods to choose an item: input with datalist and traditional select with options.

The select element keeps the option values hidde

Answer 1

Do not know this will help you, just made a try

  
  




 $( document ).ready(function() {              
         var x =  document.getElementById("options");
           for (i = 0; i < x.length; i++)
            alert(x.options[i].value);     


            $("#opt").click(function(){
                 $("#opt").val("");});                   
             });

     function onInput() {
            var val = document.getElementById("opt").value;
            var opts = document.getElementById('options').childNodes;
             for (var i = 0; i < opts.length; i++) {
                    if (opts[i].value === val) {                
                    document.getElementById("opt").value = opts[i].value + "   "+ opts[i].innerHTML;
                    break;
                  }
                }
              }