Javascript 增加列表框的大小

我有两个问题：

我想增大列表框的大小。 当我只从下拉列表中选择某个内容时，我想显示该列表框意味着我想隐藏它，直到我不从下拉列表中选择任何内容为止。 请提出一些建议。这是我的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;
                        }
                    });
                });
            });
        }
    });
});

---

隐藏和显示的代码：

我还把它埋在小提琴上

---

请给我一些建议！！！$'列表框'.csswidth，500px@siya高于$'listbox'。appendoptionHtmlI出现错误，表示未定义ShowHideListBox。请参见上文，我更改了js代码…是的，你可以看到我做了与你相同的操作。但不工作，它在js代码中表示ShowHideListBox未使用。我应该将其放在小提琴上吗？让我们来看看。

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