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 += '

';

option_html += option_content[i].name;

option_html += '

';

}

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");

});

}

});