自编jQuery插件第九个

最新推荐文章于 2024-09-18 15:54:57 发布

chinet_bridge

最新推荐文章于 2024-09-18 15:54:57 发布

阅读量7.9k

点赞数

分类专栏：下拉框单选框文章标签： jquery插件 function javascript xhtml jquery null

本文链接：https://blog.csdn.net/chinet_bridge/article/details/6937486

版权

单选框同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

下拉框

1 篇文章 0 订阅

订阅专栏

实现将下拉框内容转化成单选框组 jQPI_009_2.js:

(function ($) { 
  $.fn.changeRadioList = function(options){
	  var defaults = {
		  control:"",
		  name:""
	  }
	  var options = $.extend(defaults, options);
	  if(options.control==""||options.control==null)return;
	  if(options.name==""||options.name==null)return;
	  this.each(function(){
			var str="";$("option",this).each(function(){
				str+="<input type='radio' name='"+options.name+"' value='"+this.value+"' οnclick='alert("+this.value+")' />"+this.text;
			});$("#"+options.control).html(str);
	  });
  };
})(jQuery);

页面调用如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript" src="jquery-1.6.js"></script>
<script language="JavaScript" type="text/javascript" src="jQPI_009_2.js"></script>
<script>
$(function(){
	$("#ddl").changeRadioList({control:"txt1",name:"lst1"});
	$("#DropDownList1").changeRadioList({control:"txt2",name:"lst2"});
});
</script>
</head>
<body>
<select id="ddl" >
  <option value="1" >狮子</option>
  <option value="2" >老虎</option>
  <option value="3" >灰熊</option>
</select>
<br />
<select  id="DropDownList1" style="width:202px;">
  <option value="1">网站</option>
  <option value="2">活动</option>
  <option value="4">资讯</option>
  <option value="6">名人</option>
</select>
<br>
<span id="txt1" ></span>
<br>
<span id="txt2" ></span>
</body>
</html>