select.js——option.js（自定义下拉框） - 木之子梦之蝶

select.js——option.js（自定义下拉框）

$(document).ready(function() {
    optionCreate();

    function strToJson(str) {
        var json = eval(\'(\' + str + \')\');
        return json;
    }

    function getCaption(obj) {
        var index = obj.lastIndexOf("\-");
        obj = obj.substring(index + 1, obj.length);
        return obj;
    }
    $(document).on("click", function(e) {
        $(".option-con").hide();
        $(".select").css("border-color", "#DDDDDD");
    });

    function optionCreate() {
        $(".select").on("click", function() {
            var option_con = document.createElement("ul");
            var selectID = $(this).attr("id");
            $(this).attr("data-option", selectID);
            var option_content_src = $(this).attr("data-option");
            var option_content = strToJson(option_content_src);
            var option_html = "";
            for (var i = 0; i < option_content.length; i++) {
                option_html += \'<li class="optionLi">\';
                option_html += option_content[i].name;
                option_html += \'</li>\';
            }
            var select_width = $(this).width();
            var select_height = $(this).height();
            var select_left = $(this).position().left;
            var select_top = $(this).position().top;
            //var select_left=$(this).offset().left;
            //var select_top=$(this).offset().top;
            //自身变化
            $(this).css("border-color", "#73B2EC");
            //动态生成option
            $(option_con).attr(\'id\', \'opt-\' + selectID + \'\');
            $(option_con).addClass("option-con");
            $(option_con).width(select_width);
            $(option_con).css("left", select_left);
            $(option_con).css("top", select_top + select_height + 10);
            $(option_con).html(option_html);
            $(this).parent().parent().append(option_con);
            // document.body.style.overflow = "hidden";
            // document.body.style.height = "100%";
            var tops = $(document).scrollTop();
            $(document).bind("scroll", function() {
                $(document).scrollTop(tops);
            });
            //设置样式
            $(option_con).css({
                "z-index": "100003",
                "display": "none",
                "position": "absolute",
                "max-height": "120px",
                "overflow-y": "auto",
                "padding": "10px 10px",
                "background": "#FFFFFF",
                "color": "#666666",
                "font-size": "14px",
                "border": "1px solid #73B2EC",

            });
            if ($(this).width() < 150) {
                $(".optionLi").css({
                    "text-align": "center",
                });
            }
            $(".optionLi").css({
                "width": "100%",
                "height": "30px",
                "line-height": "30px",
                //				"text-align":"center",
                "background": "#FFFFFF",
                "color": "#666666",
                "cursor": "pointer"
            });
            $(".optionLi").hover(function() {
                $(".optionLi").css({
                    "width": "100%",
                    "height": "30px",
                    "line-height": "30px",
                    //					"text-align":"center",
                    "background": "#FFFFFF",
                    "color": "#666666",
                    "cursor": "pointer"
                });
                $(this).css({
                    "background": "#A5D6FF",
                    "color": "#FFFFFF",
                });
            });
            optionPicker();
            $(".option-con").hide();
            $(\'#opt-\' + selectID + \'\').toggle();
            event.stopPropagation();
        });
    }

    function optionPicker() {
        $(".optionLi").on("click", function() {
            var optionLi_html = $(this).html();
            var optID = $(this).parent().attr("id");
            var selectID = getCaption(optID);
            $(\'#\' + selectID + \'\').html(optionLi_html);
            $(this).parent().hide();
            $(document).unbind("scroll");
        });
    }
});

　　

var type=[
	{
		"name":"团队管理",
		"value":"1",
	},
	{
		"name":"时间进度",
		"value":"2",
	},
	{
		"name":"设计质量",
		"value":"3",
	},
	{
		"name":"执行过程",
		"value":"4",
	},
	{
		"name":"交付质量",
		"value":"5",
	},
		{
		"name":"工作态度",
		"value":"6",
	},
	{
		"name":"规则制度",
		"value":"7",
	},
	{
		"name":"团队建设",
		"value":"8",
	},
];