List box does not submit and get stuck on touch-screen

Question

I have this following code which works with mouse but its getting used by touch-screen since 2016.

Often (not 100% reliable) when someone select the option item its not executing onclick and get stuck instead of submitting the function.

Can anyone please advise how to make it touch-screen compatible and mouse?

HTML:

<div id="form_map_module3b1_new" class="submits">
  <div id="list_3b1_head" style="position: absolute; left: 192px; top: 2px;  border: none;font-size:20px;background-color: black;color:white;"></div>
  <select name="sometext" size="5" id="list_3b1" 
            style="position: absolute; left: 192px; top: 106px; width: 896px; height: 548px; border: none;font-size:20px;">  
    </select>     
</div>

JavaScript:

function button_submit(input) {
  // do some task and hide   
  $('#form_map_module3b1_new').hide(); 
}

function flood_listbox() {
  $('#list_3b1').html('');
  var part_one = '1';
  var part_two = 'Once upon a time there was a list box';
  var part_two_internal = part_two.replace(/'/g, "");    

  // we have list of 100 items actually.
  $('#list_3b1').append('<option  style="padding:10px 0px;" onclick="button_submit(' + part_one + ',\'' + part_two_internal + '\');">' + part_two + '</option>');       


}

flood_listbox();

Answer 1

It WORKS.

• problem is when you use , and option has textual value but you are touching the option line where the text value is not visible then it selects the whole line. but if you press on option text then it does not draw that blue line.