js生成html---查询数据后自动生成相对应的html展现内容

来源：互联网发布：客服系统组成部分知乎编辑：程序博客网时间：2024/05/22 04:35

---------------------先上源码

<!doctype html>

<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<title>首页</title>
<script>
$(function(){
$(window).load(function(){
a();
function a(){
var data =[
{"value":"a","text":"我是第一个"},
{"value":"b","text":"我是第二个"},
{"value":"b","text":"我是第三个"},
{"value":"b","text":"我是第四个"},
{"value":"b","text":"我是第五个"}
]
$('#sel').find("option").remove();
for(var i=0;i<data.length;i++){
var item = data[i];
// $("#sel").append("<option value='"+item.value+"'"+(i == 1?"selected='selected'":"")+">"+item.text+"</option>")
$("#sel").append("<option value=' "+item.value+" ' " +(i==3?selected='selected':'') + " >"+item.text+"</option>")
//分解--变量格式"+ 变量 +"
//例如--
// "+item.value+"
// "+(i==3?selected='selected':'')+"
}
}

});
});

</script>
</head>
<body>

<select id="sel">
<option>默认--等待js添加</option>
</select>

</body>

</html>

---------------------------------ajax写法

这里默认选择比较low若需要请参考上面参照上面代码

0 0