`
cxy020
  • 浏览: 61466 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html介绍(3)

阅读更多 
<html>
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<title>HTML标签</title>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
	<!-- 下拉框 -->
	<select id="myselect">
		<option value="1" >A</option>
		<option value="2" >B</option>
		<option value="3" selected >C</option>
	</select>
	<br />
	<input id="mybtn" type="button" value="add" /><br />

	<input id="mybtn2" type="button" value="change" /><br />
</body>
</html>

<script type="text/javascript">
	//兼容ie浏览器测试
	var console = console || {};
	console.log = console.log || function(a){
		alert(a);
	}

	/*
	下拉框是一个用处广泛和经常需要扩展的控件.
	经常用来实现下拉选择,联动选择,下拉树等.
	*/

	/*
	最简单的使用方法,如何获取下拉框的值
	*/

	var select = document.getElementById("myselect");
	//select改变value事件
	select.onchange = function(){
		//选中的value
		var val = this.value;
		console.log(val);
		//选中项的下标,注意是从0开始
		var index = this.selectedIndex;
		console.log(index);
		//选中项的文本,这个获取的方法有点特别需要记住一下
		var txt = this.options[index].text;
		console.log(txt);
	}

	/*
	这是最简单的使用方法,常常我们碰到的可能是需要动态是加载select的数据.
	那怎么做呢,方法是有很多种的.
	*/

	//动态添加一项
	var btn = document.getElementById("mybtn");
	btn.onclick = function(){
		//通过option对象动态添加,注意第一个参数是用来显示的文本,第二个参数是value
		var item = new Option("D","4");
		var select = document.getElementById("myselect");
		//添加一项
		select.options.add(item);
	}

	/*
	点击按钮可以动态添加一项,但是貌似有点傻傻的.
	如果我们有很多地方需要动态添加就比较累了,所以我们尝试简单封装一下.
	*/

	/*
	分析一下:
	1.它应该接收三个参数对吧,select对象,option的txt和value.
	但是txt和value是可以相同的,那么至少两个.
	2.动态添加是否应该验证一下,要添加的值是否已存在.
	*/
	var option = function(){
		/*
		验证要添加的选项value是否已存在
		val:选项value
		*/
		function isExist(select,val){
			var b = false;
			for (var i = 0,len = select.options.length; i < len; i++){
				var ov = select.options[i].value;
				if (ov == val) {
					b = true;
					break;
				}
			}
			return b;
		}

		/*
		动态添加option
		select:下拉框ele
		val:选项value
		txt:选项text
		*/
		function addItem(select,val,txt){
			if(typeof select == "object" && val != null){
				//验证是否已添加
				var b = isExist(select,val);
				if(!b){
					//因为参数是动态的,还记得arguments吗?
					//如果没有txt参数,那么txt = val
					txt = arguments[2] || val;

					//通过option对象动态添加,注意第一个参数是用来显示的文本,第二个参数是value
					var item = new Option(txt,val);
					if(select.options != null){
						//添加一项
						select.options.add(item);
						return false;
					}
					else{
						console.log("select参数不合法");
						return false;
					}
				}
				else{
					console.log("选项已添加");
					return false;
				}
			}
			else{
				console.log("参数不合法");
				return false;
			}
		}
		//公开方法
		return {
			isExist:isExist,
			addItem:addItem
		}
	}();//注意这个括号,是指执行这个匿名函数.

	var btn = document.getElementById("mybtn");
	btn.onclick = function(){
		var select = document.getElementById("myselect");
		option.addItem(select,"4","D");//成功
		option.addItem(select,"4","D");//已添加
		option.addItem(select,"5");//成功
	}

	/*
	封装好的option类,是全局的一个实例,随时都可以调用公开的两个方法.
	这就是js单例模式的封装方法.一般用来封装一些工具类.
	*/

	/*
	下拉框还能采用动态更新html的方法添加选项.
	这里我们简单提一下.
	*/
	var btn2 = document.getElementById("mybtn2");
	btn2.onclick = function(){
		var html = [];
		html.push('<option value="1" >足球</option>');
		html.push('<option value="2" >篮球</option>');
		html.push('<option value="2" >羽毛球</option>');
		var select = document.getElementById("myselect");
		//这样我们就可以更新select下面的全部option了.
		select.innerHTML = html.join('');
	}

	/*
	关于select还有其它一些常用的操作,简单介绍一下.
	*/

	var select = document.getElementById("myselect");

	//设置默认选择项,设置selected=true,或者再html标签直接加上属性selected
	select.options[1].selected = true;

	//删除某一个选项,将某项的options设置为null.
	//select.options[2] = null;

	//清空全部选项
	//select.options.length = 0;


	/*
	jquery时间.
	*/
	//获取选中项的值
	var val = $("#myselect").val();
	console.log(val);//2
	//获取选中项的文本,这个跟想的不一样哦,不是直接$("#myselect").text();
	var txt = $("#myselect option:selected").text();
	console.log(txt);//B
	//删除某一个选项
	$("#myselect option").get(2).remove();
	//清空全部选项
	$("#myselect").empty();

	/*
	知识点:
	1.获取select的显示文本,需要通过selectedIndex从options对象获取.
	2.动态给select添加选项的两种方式.
	3.js模仿单例模式封装方法.
	4.select的其它常用操作.
	5.介绍了使用jquery简单操作select.
	*/
</script>

 

分享到：
| html介绍(2)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics