为何使用Jquery的append方法添加标签的时候会出现空字符
为什么使用Jquery的append方法添加标签的时候会出现空字符
问题如图：
------解决思路----------------------
</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();
}
});
}
});
------解决思路----------------------
问题如图：
<!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>
------解决思路----------------------
</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();
}
});
}
});
------解决思路----------------------
<!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>