input+div 下拉选择框

时间：2022-08-17 07:50:57

前台html页面

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>showOptions</title>

    <style type="text/css">

    body

    {

        font-family: Microsoft YaHei;

        font-size: 14px;

    }

    ul li

    {

        list-style-type: none;

        margin-left: -40px;

    }

    #MenuOption

    {

        border: 1px solid #CCCCCC;

        width: 210px;

        margin-top: -10px;

        display: none;

    }

    </style>

    <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="../../Scripts/jsTest.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //清空文本框

            $("#txtSelect").val('');

            //展示的数据格式

            var jsonValue = [{ "ManaId": , "ManaDisplay": "食品类", "rows": [{ "OptId": , "OptName": "肯德基" }, { "OptId": , "OptName": "麦当劳"}] }, { "ManaId": , "ManaDisplay": "科技类", "rows": [{ "OptId": , "OptName": "宇宙飞船" }, { "OptId": , "OptName": "神州七号"}]}];

            //调用jsTest.js 中的selectOptions方法

            var param = {

                "json": jsonValue,

                "MenuOption": "MenuOption", //显示下拉框数据 div 的Id

                "txtSelect": "txtSelect"   //input 文本框的Id

            };

            //调用jsTest.js 中的selectOptions方法

            $("#content").selectOptions(param);

        });

    </script>

</head>

<body>

   <div style="margin-left: 200px; width: 200px;" id="content">

    <input type="text" id="txtSelect" style="font-family: Microsoft YaHei; width: 210px;font-size: 14px; height: 25px; border: 1px solid #CCCCCC;" />

    <div id="MenuOption">

    </div>

</div>

</body>

</html>

jsTest.js 文件

(function ($) {

    $.fn.selectOptions = function (options) {

        var defaults = {

            MenuOption: "", //对应html页面中div的Id

            json: "",      //对应html页面的json格式数据

            txtSelect: "" //对应html页面input文本框的Id

        };

        var options = $.extend(defaults, options);   //继承defaults中的参数

        $.each(options.json, function (key, value) { //循环遍历json数据 (简称:第一层数据)

            //动态的添加div元素

            $('<div style="margin-left:20px; margin-top:10px;">' + value.ManaDisplay + '</div>').appendTo("#" + options.MenuOption);

            //动态的添加ul 和li 元素

            var ul = $('<ul class="ulOpt"></ul>').appendTo("#" + options.MenuOption);

            $.each(value.rows, function (key, jsonData) {  //通过第一层数据 循环遍历第二层(rows:[{}])中的数据

                var current;

                var li = $('<li></li>').appendTo(ul)

                    .bind('mouseover', function () {

                        current = $(this).css('background-color');

                        $(this).css('background-color', '#CCCCCC');

                    }).bind('mouseout', function () {

                        $(this).css('background-color', current);

                    });

                //动态的添加div checkbox 元素

                var div = $('<div style="margin-left:50px;"></div>').appendTo(li);

                var chk = $('<input class="chk" type="checkbox" id=' + jsonData.OptId + ' />').appendTo(div)

                    .bind('click', function () {

                        //获选中的checkbox

                        var checked = $("#" + options.MenuOption + " input[type=checkbox]:checked");

                        var checkValue = ',';

                        var checkId = ',';

                        //遍历选中的checkbox并且获取到checkbox 对应的Id 和span中的值

                        $.each(checked, function (key, value) {

                            checkId += $(this).attr('id') + ",";

                            checkValue += $(this).siblings("span").text().replace(/(^\s+)|(\s+$)/g, '') + ","; //剔除空格

                        });

                        checkValue = checkValue.substring(, (checkValue.length - )); //把checkValue前后的',' 逗号 去掉

                        if (checked.length == ) {

                            checkValue = "";

                        }

                        checkId = checkId.substring(, (checkId.length - )); //获取到checkbox对应的Id的值

                        $("#txtSelect").val(checkValue);

                    });

                var span = $('<span> &nbsp &nbsp' + jsonData.OptName + '</span>').appendTo(div);

            });

        });

        //点击的元素当ID为传进来param 参数中的input的Id(txtSelect) 和显示数据的div的Id(MenuOption) 时显示div 否则隐藏

        $("body").bind('click', function (e) {

            var target = $(e.target);

            if (target.closest("#" + options.MenuOption).length ==  && target.closest("#" + options.txtSelect).length == ) {

                $("#" + options.MenuOption).hide();

            } else {

                $("#" + options.MenuOption).show();

            }

            e.stopPropagation();

        });

    };

})(jQuery);

插入一张效果图

aaarticlea/png;base64,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" alt="" />

相关文章