input + div 下拉选择框

最新推荐文章于 2021-12-08 16:52:29 发布

转载最新推荐文章于 2021-12-08 16:52:29 发布 · 1.9k 阅读

精选专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript创建动态菜单选项的实例，展示了如何通过jQuery操作DOM元素，实现下拉菜单的选择功能，包括数据绑定、鼠标悬停效果及输入框值更新。

前台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": 1, "ManaDisplay": "食品类", "rows": [{ "OptId": 1, "OptName": "肯德基" }, { "OptId": 2, "OptName": "麦当劳"}] }, { "ManaId": 2, "ManaDisplay": "科技类", "rows": [{ "OptId": 3, "OptName": "宇宙飞船" }, { "OptId": 4, "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(1, (checkValue.length - 1)); //把checkValue前后的',' 逗号 去掉
                        if (checked.length == 0) {
                            checkValue = "";
                        }
                        checkId = checkId.substring(1, (checkId.length - 1)); //获取到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 == 0 && target.closest("#" + options.txtSelect).length == 0) {
                $("#" + options.MenuOption).hide();
            } else {
                $("#" + options.MenuOption).show();
            }
            e.stopPropagation();
        });
    };

})(jQuery);