为什么使用Jquery的append方法添加标签的时候会出现空字符

MnZlZ 2015-06-21 10:01:36
问题如图：



<!DOCTYPE html>

<html>

<head>

	<meta charset='utf-8' />

	<title>三级联动菜单</title>

	<style type='text/css'>

	.sel2{

		display: none;

	}

	.sel3{

		display: none;

	}

	</style>

</head>

<body>

	<div>

		<select class="sel1" id="sel1">



		</select>

		<select class="sel2" id="sel2">

			

		</select>

		<select class="sel3" id="sel3">

			

		</select>

	</div>

	<script type="text/javascript" src='js/jquery.min.js'></script>

	<script type="text/javascript">

	$(function(){

		var data={

			"city" : ["city1","city2","city3"],

			"school" : {

				"city1" : ["city1-school1","city1-school2","city1-school3"],

				"city2" : ["city2-school1","city2-school2","city2-school3"],

				"city3" : ["city3-school1","city3-school2","city3-school3"]

			},

			"class" : {

				"city1-school1" : ["city1-school1-class1","city1-school1-class2"],

				"city1-school2" : ["city1-school2-class1","city1-school2-class2"],

				"city1-school3" : ["city1-school3-class1","city1-school3-class2"],



				"city2-school1" : ["city2-school1-class1","city2-school1-class2"],

				"city2-school2" : ["city2-school2-class1","city2-school2-class2"],

				"city2-school3" : ["city2-school3-class1","city2-school3-class2"],



				"city3-school1" : ["city3-school1-class1","city3-school1-class2"],

				"city3-school2" : ["city3-school2-class1","city3-school2-class2"],

				"city3-school3" : ["city3-school3-class1","city3-school3-class2"],

			}

		};

		var opt1Len=data['city'].length;

		for(var i=0;i<opt1Len;i++){

			$("#sel1").append("<option>"+data['city'][i]+"<option>");

		}

		$("#sel1>option").click(function(){

			var cityText=$(this).text();

			if(cityText!="" || cityText!=null || cityText!="undifine"){

				var schools=data['school'][cityText];

				$("#sel2>option").remove();

				for(var j=0;j<schools.length;j++){

					$("#sel2").append("<option>"+schools[j]+"<option>");//这里出问题了

				}

				$("#sel2").show();

				$("#sel3").hide();

				opt();	//这里需要做异步处理

			}

		});

		function opt(){

			$("#sel2>option").click(function(){

				var schoolText=$(this).text();

				if(schoolText!="" || schoolText!=null || schoolText!="undifine"){

					var classs=data['class'][schoolText];

					$("#sel3>option").remove();

					for(var k=0;k<classs.length;k++){

						$("#sel3").append("<option>"+classs[k]+"<option>");//这里出问题了

					}

					$("#sel3").show();

				}

			});

		}

	});

	</script>

</body>

</html>

...全文
609 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
魂小梦 2019-03-31
  • 打赏
  • 举报
 回复
我竟然也是少了那个斜杠/，emmmmmm
MnZlZ 2015-06-22
  • 打赏
  • 举报
 回复
引用 3 楼 天际的海浪的回复:
</option>中的 / 都哪去了？ var opt1Len=data['city'].length; for(var i=0;i<opt1Len;i++){ $("#sel1").append("<option>"+data['city'][i]+"</option>"); } $("#sel1>option").click(function(){ var cityText=$(this).text(); if(cityText!="" || cityText!=null || cityText!="undifine"){ var schools=data['school'][cityText]; $("#sel2>option").remove(); for(var j=0;j<schools.length;j++){ $("#sel2").append("<option>"+schools[j]+"<</option>");//这里出问题了 } $("#sel2").show(); $("#sel3").hide(); opt(); //这里需要做异步处理 } }); function opt(){ $("#sel2>option").click(function(){ var schoolText=$(this).text(); if(schoolText!="" || schoolText!=null || schoolText!="undifine"){ var classs=data['class'][schoolText]; $("#sel3>option").remove(); for(var k=0;k<classs.length;k++){ $("#sel3").append("<option>"+classs[k]+"<</option>");//这里出问题了 } $("#sel3").show(); } }); } });
被我给弄丢了，现在解决了，谢谢啊
hch126163 2015-06-21
  • 打赏
  • 举报
 回复
for(var k=0;k<classs.length;k++){ $("#sel3")[0].options.add(new Option(classs[k],classs[k])); }
天际的海浪 2015-06-21
  • 打赏
  • 举报
 回复 


<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8' />
	<title>三级联动菜单</title>
	<style type='text/css'>
	.sel2{
		display: none;
	}
	.sel3{
		display: none;
	}
	</style>
</head>
<body>
	<div>
		<select class="sel1" id="sel1">

		</select>
		<select class="sel2" id="sel2">
			
		</select>
		<select class="sel3" id="sel3">
			
		</select>
	</div>
	<script type="text/javascript" src='js/jquery.min.js'></script>
	<script type="text/javascript">
	$(function(){
		var data={
			"city" : ["city1","city2","city3"],
			"school" : {
				"city1" : ["city1-school1","city1-school2","city1-school3"],
				"city2" : ["city2-school1","city2-school2","city2-school3"],
				"city3" : ["city3-school1","city3-school2","city3-school3"]
			},
			"class" : {
				"city1-school1" : ["city1-school1-class1","city1-school1-class2"],
				"city1-school2" : ["city1-school2-class1","city1-school2-class2"],
				"city1-school3" : ["city1-school3-class1","city1-school3-class2"],

				"city2-school1" : ["city2-school1-class1","city2-school1-class2"],
				"city2-school2" : ["city2-school2-class1","city2-school2-class2"],
				"city2-school3" : ["city2-school3-class1","city2-school3-class2"],

				"city3-school1" : ["city3-school1-class1","city3-school1-class2"],
				"city3-school2" : ["city3-school2-class1","city3-school2-class2"],
				"city3-school3" : ["city3-school3-class1","city3-school3-class2"],
			}
		};
		var opt1Len=data['city'].length;
		for(var i=0;i<opt1Len;i++){
			$("#sel1").append("<option>"+data['city'][i]+"</option>");
		}
		$("#sel1>option").click(function(){
			var cityText=$(this).text();
			if(cityText!="" || cityText!=null || cityText!="undifine"){
				var schools=data['school'][cityText];
				$("#sel2>option").remove();
				for(var j=0;j<schools.length;j++){
					$("#sel2").append("<option>"+schools[j]+"</option>");//这里出问题了
				}
				$("#sel2").show();
				$("#sel3").hide();
				opt();	//这里需要做异步处理
			}
		});
		function opt(){
			$("#sel2>option").click(function(){
				var schoolText=$(this).text();
				if(schoolText!="" || schoolText!=null || schoolText!="undifine"){
					var classs=data['class'][schoolText];
					$("#sel3>option").remove();
					for(var k=0;k<classs.length;k++){
						$("#sel3").append("<option>"+classs[k]+"</option>");//这里出问题了
					}
					$("#sel3").show();
				}
			});
		}
	});
	</script>
</body>
</html>
天际的海浪 2015-06-21
  • 打赏
  • 举报
 回复
</option>中的 / 都哪去了？ var opt1Len=data['city'].length; for(var i=0;i<opt1Len;i++){ $("#sel1").append("<option>"+data['city'][i]+"</option>"); } $("#sel1>option").click(function(){ var cityText=$(this).text(); if(cityText!="" || cityText!=null || cityText!="undifine"){ var schools=data['school'][cityText]; $("#sel2>option").remove(); for(var j=0;j<schools.length;j++){ $("#sel2").append("<option>"+schools[j]+"<</option>");//这里出问题了 } $("#sel2").show(); $("#sel3").hide(); opt(); //这里需要做异步处理 } }); function opt(){ $("#sel2>option").click(function(){ var schoolText=$(this).text(); if(schoolText!="" || schoolText!=null || schoolText!="undifine"){ var classs=data['class'][schoolText]; $("#sel3>option").remove(); for(var k=0;k<classs.length;k++){ $("#sel3").append("<option>"+classs[k]+"<</option>");//这里出问题了 } $("#sel3").show(); } }); } });
MnZlZ 2015-06-21
  • 打赏
  • 举报
 回复
引用 1 楼 hch126163的回复:
for(var k=0;k<classs.length;k++){ $("#sel3")[0].options.add(new Option(classs[k],classs[k])); }
可以的，谢谢啊，这个以后都没接触过，能给我稍微介绍一下吗？
jquery 追加元素append、prepend、before、after用法与区别分析
在jquery中append、prepend、before、after方法是对数据元素节点的操作系列方法了，这些方法大家了解吗？如果不了解就可以和小编来看看它们用法
jQuery中对节点进行操作的相关介绍
动态创建Dom节点 jQuery中使用$(html字符串)来动态创建Dom节点，并且返回一个jQuery对象，可以调用append等方法将创建的节点添加到Dom中。 例如：         var link = $(“百度”);         $(“div:first”).append(link); 添加节点元素的方法： Append方法用来在元素的末尾追加元素（最后一个子节点） Prepend在元素的开始添加元素（第一个子节点） After:在元素之后添加元素（添加兄弟节点） Before：在元素之前添加元素（添加兄弟节
jQuery简单创建节点的方法
主要介绍了jQuery简单创建节点的方法,涉及jQuery获取节点及append添加元素创建节点的相关技巧,需要的朋友可以参考下
用Jquery动态append方式加入标签时（或者使用字符串拼接）Css样式丢失的解决方法...
$("#所在标签id").append(obj); // 用append 方式添加拼接的标签 $("#所在标签id").listview("refresh"); //在使用'ul'标签时才使用，作用:刷新列表 $("#所在标签id").trigger("create"); //重新加载所在标签的样式。不加这一句动态append的标签将丢失Css样式 $.a...
如何用append连接html文件,jquery append()怎么用？
append()是jquery中的一个内置函数，用于在被选元素的结尾插入指定内容。下面本篇文章给大家介绍一下jquery append()方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。在jquery中，append()是追加方法，可以在被选中的元素后添加内容，属于在元素的内部添加。注：append()方法的作用和appendTo()方法是相同的，但是语法是不同的，尽管语法形...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章