Двойной щелчок по выбранному элементу в выпадающем списке

Question

У меня возникла проблема: при выборе элемента из раскрывающегося списка окно списка не приходит. Мне нужно снова нажать на выбранный элемент в раскрывающемся списке, чтобы получить список. Это означает, что мне нужно дважды щелкнуть элемент в раскрывающемся списке. Это мой HTML

<script> 
    function ShowHideListBox(e) { 
     e.stopPropagation() 
     e.preventDefault() 

     var IsOpen = $('#listbox').attr('IsOpen') 
     if (IsOpen == "false") { 
      ShowList(e) 
     } 
     else { 
      HideList(e) 
     } 
    } 

    function ShowList(elem) { 
     $('#listbox').attr('IsOpen', 'true') 
     $('#listbox').show() 
    } 

    function HideList(elem) { 
     $('#listbox').attr('IsOpen', 'false') 
     $('#listbox').hide() 
    } 

</script> 
<form name="myform" id="myForm"> 
     <select id="dropdown1" onclick="return ShowHideListBox(event)"></select> 


     <select id="listbox" multiple style="display:none; cursor:default;" isopen="false"></select> 
    </form> 

Мой файл JS

$(document).ready(function() { 
    $.ajax({ 
     url: "data.json", 
     dataType: "json", 
     success: function(obj) { 
      var jsObject = obj; 
      var usedNames = []; 



      $('<option>', { 
       text: 'Select your Option', 
       value: '', 
       selected: 'selected', 
       disabled: 'disabled' 
      }).appendTo('#dropdown1'); 


      $.each(obj, function(key, value) { 
       if (usedNames.indexOf(value.name) == -1) { 
        $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>"); 
        usedNames.push(value.name); 
       } 
       /* $('<option>', { 
       text: 'Select your Option', 
       value: '', 
       selected: 'selected', 
       disabled: 'disabled' 
       }).appendTo('#dropdown1'); 
       */ 

       //$.each(usedNames, function(index, value) { 
       // $('<option>', { 
       //  text: value['name'], 
       //  value: index 
       // }).appendTo('#dropdown1'); 
       //}); 

       /* $('<option>', { 
       text: 'Select your List Option', 
       value: '', 
       selected: 'selected', 
       disabled: 'disabled' 
       }).appendTo('#listbox'); */ 


       $('#dropdown1').change(function() { 
        $('#listbox').empty(); 

        $('<option>', { 
         text: 'Select your List Option', 
         value: '', 
         selected: 'selected', 
         disabled: 'disabled' 
        }).appendTo('#listbox'); 

        var selection = $('#dropdown1 :selected').text(); 
       // var selection = $('#dropdown1 :selected').text(); 
        $.each(jsObject, function(index, value) { 
         if (value['name'] == selection) { 
          var optionHtml = ''; 
          for (var i = 1; i <= 20; i++) { 
           var attr = 'attr' + ('000' + i).substr(-3); 
           optionHtml += '<option value="' + attr + '">' + value[attr] + '</option>'; 
          } 

          $("#listbox").css("width","500px") 

          $("#listbox").css("height","300px") 
          $('#listbox').append(optionHtml); return false; 
         } 
        }); 
       }); 
      }); 
     } 
    }); 
}); 

Answer 1

Вы отправляете событие и передать его в Showlist функции Вам необходимо отправить цель также удалить e.stopPropagation(); e.preventDefault()

<script> 
    function ShowHideListBox(e) { 

     var IsOpen = $('#listbox').attr('IsOpen') 
     if (IsOpen == "false") { 
      ShowList(e.target) 
     } 
     else { 
      HideList(e.target) 
     } 
    } 

    function ShowList(elem) { 
     $('#listbox').attr('IsOpen', 'true') 
     $('#listbox').show() 
    } 

    function HideList(elem) { 
     $('#listbox').attr('IsOpen', 'false') 
     $('#listbox').hide() 
    } 

</script> 
<form name="myform" id="myForm"> 
     <select id="dropdown1" onclick="return ShowHideListBox(event)"></select> 

     <select id="listbox" multiple style="display:none; cursor:default;" isopen="false"></select> 
    </form>