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>

双击下拉列表中的所选项目

1 个答案: