Açılır pencerede seçili öğeye çift tıklayın

Question

Açılır listeden bir öğe seçtiğimde liste kutusu gelmiyorsa listeden çıkmak için açılan menüden açılan menü öğesine tekrar tıklamam gerekiyor. Bu, açılan menüdeki öğeye çift tıklamaya ihtiyacım var demektir. Bu Benim 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> 

Benim js dosyası

$(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

Sen olayı gönderme ve Showlist fonksiyonu geçirmeden Sen de 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> 

kaldırmak hedef göndermek gerekir edilir