Help with on click on mobile <select> tag

Help with on click on mobile <select> tag

https://youtu.be/0eTAQTmgTC0

This is my problem with the website I am working on for inventory of Magic cards. 
I don't want mobile users to have to click on the option they want twice to get the data to load. If you watch the video you can see what I mean. Here is my code below. 

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <title>
  5. Magic Inventory
  6. </title>
  7.   <meta charset="utf-8">
  8. <link rel="stylesheet" type="text/css" href="css/table.css">
  9. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  10. <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
  11. <link rel="stylesheet" type="text/css" href="css/Style.css">
  12. <link rel="stylesheet" type="text/css" href="css/table.css">
  13. <script type='application/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  15. <style>
  16. tr.foilInStock{
  17. background-color: #9AD8ED;
  18. }
  19. tr.outOfStock{
  20. background-color: #C4C4C4;
  21. }
  22. .table_margin {
  23. margin-top: 3em
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="container">
  29. <div class="row">
  30. <div class="leftNavDiv col-md-3">
  32.    <h1>Search</h1>
  34.    <input type="text" id="inputText-cardNameSearchTextBox-leftNavDiv" placeholder="Spore Frog" style="width:260px;" class="form-control"/><br />
  35.    <select id="select-cardListSelector-leftNavDiv" size="10" style="height:200px; width:260px;" class="form-control"></select><br />
  37. </div>
  38. <div class="bodyDiv col-md-9">
  39. <table id="div-cardsDisplayTable-bodyDiv" data--tbody-cardlist-bodydiv="" class="table table-bordered table_margin">
  40. <thead>
  41. <tr>
  42. <th>Name</th>
  43. <th>Set</th>
  44. <th>Quantity</th>
  45. </tr>
  46. </thead>
  48. <tbody data--tbody-cardlisttablebody-bodydiv="" id="div-cardsDisplayTableBody-bodyDiv">
  50. </tbody>
  51. </table>
  52. </div>
  53. </div>
  54. </div>

  56. <script>
  57. // ToC: search
  58.     /* ---------------------------
  59.         
  60.         A) UI Functionality:
  61.             1. cardNameSearchTextbox_keyup
  62.             2. cardNameUL_Populate
  63.             3. cardNameSelected
  64.     
  65.         B) Event Listeners:
  66.             1. card name selected

  68.         C) Global:
  69.             1. This function is for the delay of when a user is typing in the card name box before it ajax searches

  71.         D) Document Ready:
  72.             1. card search text box, seeking keystrokes
  73.             2. prevent "Enter" keystroke from submitting in text input

  75.     */

  77.  /////////////////////////////////////////////////////////////////////// A
  78. // [A] UI Functionality ///////////////////////////////////////////////  A
  79. //////////////////////////////////////////////////////////////////////   A

  81. //
  82. /*--------------------------------------
  83. Updates:
  84. 1/24/17:
  85. -Added á/Æ/â to Unescape
  86. */
  87. //

  89. function htmlUnescape(value) {
  90.     return String(value)
  91.         .replace(/quot;/g, '"')
  92.         .replace(/&#39;/g, "'")
  93.         .replace(/u0026#39;/g, "'")
  94.         .replace(/&lt;/g, '<')
  95.         .replace(/&gt;/g, '>')
  96.         .replace(/&amp;/g, '&')
  97. .replace(/u0026#225;/g, 'á')
  98. .replace(/u0026#198;/g, 'Æ')
  99. .replace(/u0026#226;/g, 'â')
  100.         .replace(/u0026amp;/g, '&');
  101. }

  103. // [A.1] cardNameSearchTextbox_keyup
  104.     /* 
  105.     This calls the delay function and will result in the cardNameUL_Populate function being called after the delay has passed.
  106.     */
  107.     function cardNameSearchTextbox_keyup () {

  109.         delay(function () {

  111.             if ($('#inputText-cardNameSearchTextBox-leftNavDiv').val().length > 2) {

  113.                 cardNameUL_Populate();

  115.             } else {

  117.                 $('#select-cardListSelector-leftNavDiv').empty();
  118.             };
  119.         }, 500);
  120.     };

  122. // [A.2] cardNameUL_Populate 
  123.     /* 
  124.     This function gets called to populate the list of cards for search
  125.     */
  126.     function cardNameUL_Populate () {

  128.     // ajax
  129.         $.ajax({
  130.             type: "POST",
  131.             url: "127.0.0.1/WebService.asmx/loadCardsBySearch",
  132.             data: '{search: "' + $('#inputText-cardNameSearchTextBox-leftNavDiv').val() + '"}',
  133.             contentType: "application/json; charset=utf-8",
  134.             dataType: "json",
  136.             success: function (response) {
  137.   
  138.                 var JSONresponse = JSON.stringify(response).substring(6, JSON.stringify(response).length - 2);

  140.             // error check
  141.                 if (JSONresponse.substring(0, 5) == "Error") {

  143.                 } else if (JSONresponse == "") {

  145.             // if no errors
  146.                 } else {
  147.                     
  148.                     JSONresponse = JSONresponse.replace(/\\/g, '');
  149.                     var jsonObject = $.parseJSON(JSONresponse);
  150.                     
  151.                     $('#select-cardListSelector-leftNavDiv').empty()

  153.                     $.each(jsonObject, function (i, obj) {

  155.                         $('#select-cardListSelector-leftNavDiv')

  157.                         .append($('<option>', { value: htmlUnescape(obj.cardName), text: htmlUnescape(obj.cardName) }));

  159.                     }); // end $.each
  160.                 };      // end if
  161.             },        // end success

  163.             failure: function (msg) {
  164.                 alert(msg);
  165.             }, // end failure

  167.             complete: function (jqXHR, textStatus) {
  168.                 // alert('complete')
  169.             }

  171.         }); // end $.ajax
  172.     };

  174. // [A.3] cardNameSelected
  175.     /*

  177.     */
  178.     function cardNameSelected (cardName) {
  180.     // clear table of previously loaded information
  181.         $('[data--tbody-cardlisttablebody-bodydiv]').empty();

  183.         $.ajax({
  184.             type: "POST",
  185.             url: "127.0.0.1/WebService.asmx/loadCardDetailsByCardName",
  186.             data: '{cardName: "' + cardName + '"}',
  187.             contentType: "application/json; charset=utf-8",
  188.             dataType: "json",

  190.             success: function (response) {

  192.                 var JSONresponse = JSON.stringify(response).substring(6, JSON.stringify(response).length - 2);

  194.             // error check
  195.                 if (JSONresponse.substring(0, 5) == "Error") {

  197.                 } else if (JSONresponse == "") {

  199.             // if no errors
  200.                 } else {
  201.                     
  202.                     JSONresponse = JSONresponse.replace(/\\/g, '');
  203.                     var jsonObject = $.parseJSON(JSONresponse);

  205.                 // display information into table for user
  206.                     $(function () {
  207.                         $.each(jsonObject, function (i, obj) {

  209.                         // convert 'is foil' response from numerical to 'True/False' phrase
  210.                             var cardNameFormatted = cardName;
  212.                             if (obj.isFoil == "True") {

  214.                                 cardNameFormatted = cardName + " (Foil)";
  215.                             };

  217.                         // create row, loading data-tags & table cells with the information
  218.                             var $tr = '<tr ';
  220. if ((obj.isFoil == "True") && (parseInt(obj.cardQuantity) > 0)) {

  222. $tr += 'class="foilInStock"';
  223. }
  224. else if (parseInt(obj.cardQuantity) == 0){
  226. $tr += 'class="outOfStock"';
  228. };
  229. $tr += '>' +

  231.                                 // card Name
  232.                                     '<td>' + cardNameFormatted + '</td>' +
  233. // card Set
  234.                                     '<td style="text-align:center">' + htmlUnescape(obj.setName) + '</td>' +
  235.                                 // card Quantity
  236.                                     '<td>' + obj.cardQuantity + '</td></tr>';
  237.                                 
  239.                         // display row, to table
  241.                             $('#div-cardsDisplayTableBody-bodyDiv').append($tr);

  243.                         }); // end $.each

  245.                     });     // end function
  246.                 };          // end if
  247.             },              // end success

  249.             failure: function (msg) {
  250.             },  //end failure

  252.             complete: function (jqXHR, textStatus) {
  253.             }   // end complete

  255.         });     // end $.ajax
  256.     };

  258.  /////////////////////////////////////////////////////////////////////// B
  259. // [B] Event Listeners ////////////////////////////////////////////////  B
  260. //////////////////////////////////////////////////////////////////////   B

  262. // [B.1] card name selected
  263.     /*

  265.     */
  266.     $('#select-cardListSelector-leftNavDiv').on("click vclick", function () {
  268.         // check that card selected isn't the same card already loaded
  269.         cardNameSelected($('#select-cardListSelector-leftNavDiv').val());
  271.     });

  273.  /////////////////////////////////////////////////////////////////////// C
  274. // [C] Global /////////////////////////////////////////////////////////  C
  275. //////////////////////////////////////////////////////////////////////   C

  277. // [C.1] This function is for the delay of when a user is typing in the card name box before it ajax searches
  278.     /*

  280.     */
  281.     var delay = (function () {
  282.         var timer = 0;
  283.         return function (callback, ms) {
  284.             clearTimeout(timer);
  285.             timer = setTimeout(callback, ms);
  286.         };
  287.     })();

  289.  /////////////////////////////////////////////////////////////////////// D
  290. // [D] Document Ready//////////////////////////////////////////////////  D
  291. //////////////////////////////////////////////////////////////////////   D

  293. $(document).ready(function () {
  294.     
  295. // [D.1] card search text box, seeking keystrokes
  296.     /*

  298.     */
  299.     $('#inputText-cardNameSearchTextBox-leftNavDiv').on('keyup', cardNameSearchTextbox_keyup);


  302. // [D.2] prevent "Enter" keystroke from submitting in text input
  303.     /*
  304.     
  305.     */
  306.     $("#inputText-cardNameSearchTextBox-leftNavDiv").bind("keypress", function (e) {
  307.         if (e.keyCode == 13) {
  308.             return false;
  309.         }
  310.     });

  312. }); //document.ready
  313. </script>

  315. </body>
  316. </html>