Увеличение размера списка коробки

Question

У меня есть два вопроса:

1. Я хочу увеличить размер моего списка.
2. Как я выбираю что-то из своего раскрывающегося списка, тогда я хочу показать, что это окно списка означает, что я хочу скрыть его, пока я не выберу ничего из своего раскрывающегося списка.

Пожалуйста, предложите что-нибудь. Это мой HTML код

<label> List of Tables : </label><br> 

<form name="myform" id="myForm"> 
    <select id="dropdown1" onclick="return ShowHideListBox(event)"></select> 
    <select id="listbox" 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'); 


      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() 
      } 






      $.each(obj, function(key, value) { 
       if (usedNames.indexOf(value.name) == -1) { 
        $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>"); 
        usedNames.push(value.name); 
       } 

       $('#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').append(optionHtml); return false; 
         } 
        }); 
       }); 
      }); 
     } 
    }); 
}); 

Answer 1

код для скрытия и отображения:

Также я Embeded его на скрипку https://jsfiddle.net/eua98tqa/4/

<form name="myform" id="myForm"> 
     <select id="dropdown1" onclick="return ShowHideListBox(event)"></select> 
     <select id="listbox" style="display:none; cursor:default;" isopen="false"></select> 
    </form> 

Скрипт показать/скрыть при нажатии выпадающего меню:

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()    
    }