您的当前位置:首页基于jquery的checkbox下拉框插件代码_jquery
广告

基于jquery的checkbox下拉框插件代码_jquery

2023-12-02 来源:六三科技网

option_check.js代码 : 代码如下: /***************************************** 调用方法为: Jselect($("#inputid"),{ bindid:'bindid', hoverclass:'hoverclass', optionsbind:function(){return hqhtml();} }); inputid为下拉框要绑定的文本框id bindid为点击弹出/收回下拉框的控件id hoverclass为鼠标移到选项时的样式 hqhtml为绑定的数据 ******************************************/ (function($){ $.showselect = { init : function(o,options){ var defaults = { bindid : null, //事件绑定在bindid上 hoverclass:null, //鼠标移到选项时样式名称 optionsbind:function(){} //下拉框绑定函数 } var options = $.extend(defaults,options); if(options.optionsbind!=null){//如果绑定函数不为空 this._setbind(o,options); } if(options.bindid!=null){ this._showcontrol(o,options); } }, _showcontrol:function(o,options){//控制下拉框显示 $("#"+options.bindid).toggle(function(){ $(o).next().slideDown(); },function(){ $(o).next().slideUp(); }) }, _setbind:function(o,options){//绑定数据 var optionshtml="" +options.optionsbind()+""; $(o).after(optionshtml); var offset= $(o).offset(); var w=$(o).width(); $(o).next().css({top:offset.top+$(o).height()+7,left:offset.left,width:w}); if(options.hoverclass!=null){ $(o).next().find("tr").hover(function(){$(this).addClass(options.hoverclass);}, function(){$(this).removeClass(options.hoverclass);}); } $(o).next().find("input[type=checkbox]").filter("[lang=checked]").each(function(){$(this).attr("checked","checked");}); $(o).next().find("input[type=checkbox]").click(function(){ var $ckoption=$(this).attr("checked"); if($ckoption){ $(this).attr("checked",""); }else{ $(this).attr("checked","checked"); } }); $(o).next().find("tr").click(function(){ var $ckflag=$(this).find("input[type=checkbox]"); if($ckflag.attr("checked")){ $ckflag.attr("checked",""); $ckflag.attr("lang",""); } else{ $ckflag.attr("checked","checked"); $ckflag.attr("lang","checked"); } var selarray=new Array(); $(o).next().find("input[type=checkbox]").each(function(){ if($(this).attr("checked")) selarray.push($(this).parent().next().text()); }); $(o).val(selarray.join(',')); }); $(o).next().hide(); } } Jselect = function(o,json){ $.showselect.init(o,json); }; })(jQuery); html代码: 代码如下:

六三科技网还为您提供以下相关内容希望对您有帮助:

求js代码,三个复选框选项,选中一个复选框后面弹出对应的下拉框...

1 2 3

jquery下拉框remove后怎么重新显示?

remove后,dom就被移除了,所以如果你还想显示,最好不要用remove,而用hide()方法隐藏,用show()再次显示,比如:$('option').hide(); $('option').show();如果一定要remove,在remove前,把dom记录在一个变量里,...

Jquery如何获取设置radio select checkbox 文本框?

下拉框select:('#sel').val();控制表单元素:文本框,文本区域:$("#txt").attr("value",'');//清空内容 ("#txt").attr("value",'11');//填充内容 多选框checkbox:("#chk1").attr("checked",'');//...

求用JQuery生成下拉框以及获取下拉框当前值的示例.

生成直接用html("")的方式生成就可以了..获取的话.直接获取这个$('#abc options:selected').text()就可以了..#abc 是这个控件..options是他下拉框 :selected 是代表已选择的选项...text()代表选中的选项里面的文本 ...

jquery循环添加checkbox

jQuery 代码:("input:checked")结果:[ , ]var check = $("input:checked"); //得到所有被选中的checkbox var actor_config; //定义变量 check.each(function(i){ //循环拼装被选中项的值 actor_config =...

js或者jquery怎么获取两个下拉框选中值,第二个下拉框根据第一个选择是...

1.右键 审查元素 ,查看2个下拉框的选择器 2.js:document.getElementById ("a").value 3.jq:("#a").val()

如何用JS选中下拉框选项

1、打开vscode,创建一个H5规范的页面,用于演示js如何给下拉框设置默认值。2、在页面中添加一个下拉框,并在html中通过selected属性,默认选择下拉框的第2个值。3、在浏览器中打开页面,就可以看到这个下拉框默认选中的第二...

如何通过JQUERY获得下拉框的显示值

通过获取元素的text实现功能。关键的两个jquery函数为:("select").val(); // 选中项目的value值。$("select option:checked").text(); // 选中项目的显示值。实例演示如下:1、设计简单的一个下拉框代码,包括【男...

jquery.multiselect.js 实现下拉框多选怎么设置默认全部选中下拉框的值...

在调用这个插件前用jquery设置optin的selected属性 JavaScript code?var v='1,2,3'//这个为保存的值,自己从数据库读取来赋值给v变量v=','+v+',';//添加分隔符号,好indexOf进行比较var arr=v.split(',');$('#...

jQuery如何实现下拉框的二级联动?

//获取下拉框1的选中项 var strid=document.getElementById("xlk1").value;//获取选中项的内容 //var strtxt=document.getElementById("xlk1").options[window.document.getElementById("xlk1").selectedIndex].text;//...

Top