现在位置首页 / 前端开发 /正文

jquery 可编辑的下拉框(select)修改完善版

作者: IT小兵 | 2013年12月27日| 热度:℃ | 评论: |参与:

今天分享一个可编辑输入的下拉框Jquery控件。

其实网上有很多这样的例子,基本原理就是根据原始Select控件,产生一个input控件,

设置input的值与select变化一致,最后返回的值是input控件的value即可。

下面是代码:

(function($){
    $.fn.selectbox = function () {
         
			//用变量idm存储select的id或name
			var idm = $(this).attr("id") || $(this).attr("name");
			if($("#" + idm + "div").length <= 0){//判断动态创建的div是否已经存在,如果不存在则创建
				var divHtml = "<div style='display:none' id='" + idm + "div'><input type='text' id='" + idm + "inputText'/></div>";
				$(this).attr("tabindex",-1).after(divHtml);
				$("#" + idm + "div").css({position:"absolute",top:$(this).position().top -1 ,left:$(this).position().left-7}).show();
				$("#" + idm + "inputText").val($(this).val()).css({width:$(this).width()-13,height:$(this).height() + 1});
				//select注册onchange事件
				$(this).change(function(){
						$("#" + idm + "inputText").val($(this).val());	
				})				
			}
			("#" + idm + "inputText").attr("disabled", $(this).attr("disabled"));
			//解决ie6下select浮在div上面的bug
			//$("#" + idm + "div").bgIframe();
			return $("#" + idm + "inputText").val();
		}
})(jQuery);

这是基于网上一个版本的修改版。把上面代码保存成js文件即可使用。如果需要美化,可以考虑自己弄个css啥的。

主要是增加了一个根据select的disable的属性设置input的是否可用,并调整了一下在IE10下的显示问题。


另外分享2个js代码:

1、根据Text文本,设置select的值:

///设置select下拉框值。是text,不是value
function SetSelectOpertionValue(id,text) {
    var count = $("#" + id + " option").length;
    for (var i = 0; i < count; i++) {
        if ($("#" + id + "").get(0).options[i].text == text) {
            $("#" + id + "").get(0).options[i].selected = true;
            break;
        }
    }
}

2.格式化Js的时间格式:

 function GetJsDate(time) {
     var data = new Date(time);
     var year = data.getFullYear();  //获取年
     var month = data.getMonth() + 1;    //获取月
     var day = data.getDate(); //获取日
     var hours = data.getHours();
     var minutes = data.getMinutes();
     time = year + "-" + month + "-" + day ;
     return time;
 }
  function GetJsTime(time) {
     
    var data = new Date(time);
    var year = data.getFullYear();  //获取年
    var month = data.getMonth() + 1;    //获取月
    var day = data.getDate(); //获取日
    var hours = data.getHours();
    var minutes = data.getMinutes();
    time = year + "-" + month + "-" + day + "" + " " + hours + ":" + minutes;
    return time;
}

3、Js的GUID生成函数:

function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
               .toString(16)
               .substring(1);
};
function JsGuid() {
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
           s4() + '-' + s4() + s4() + s4();
}

转发注明:http://www.suchso.com IT分享

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询