您的位置：首页 > Web前端 > JavaScript

js select级联，上面分类，下面是内容

2015-08-07 15:51 676 查看

js select级联，上面分类，下面是内容。

js级联效果如下：

分类：
请选择
水果
蔬菜
其他

内容：
// var waItemsJson = [
{"type_id":1,"id":11,"item_code":"苹果","item_name":"苹果"},
{"type_id":1,"id":11,"item_code":"香蕉","item_name":"香蕉"},
{"type_id":1,"id":11,"item_code":"梨","item_name":"梨"},
{"type_id":2,"id":11,"item_code":"白菜","item_name":"白菜"},
{"type_id":2,"id":11,"item_code":"青菜","item_name":"青菜"},
{"type_id":3,"id":11,"item_code":"可乐","item_name":"可乐"}
];

function changeType(obj){
removeAll("itemId");
for(var i=0;i
html和js代码如下：

<html>
<head>
<title>js select级联，上面分类，下面是内容</title>
<meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
</head>
<body>

<div>
<label for="form-field-select-1">分类：</label>
<select class="form-control" onchange="changeType(this)">
<option value="">请选择</option>
<option value="1">水果</option>
<option value="2">蔬菜</option>
<option value="3">其他</option>
</select>
</div>
<div>
<label for="form-field-select-1">内容：</label>
<select id="itemId" class="form-control" multiple="multiple">

</select>
</div>

<script type="text/javascript">
var waItemsJson = [
{"type_id":1,"id":11,"item_code":"苹果","item_name":"苹果"},
{"type_id":1,"id":11,"item_code":"香蕉","item_name":"香蕉"},
{"type_id":1,"id":11,"item_code":"梨","item_name":"梨"},
{"type_id":2,"id":11,"item_code":"白菜","item_name":"白菜"},
{"type_id":2,"id":11,"item_code":"青菜","item_name":"青菜"},
{"type_id":3,"id":11,"item_code":"可乐","item_name":"可乐"}
];

function changeType(obj){
removeAll("itemId");
for(var i=0;i<waItemsJson.length;i++){
if(obj.value==waItemsJson[i].type_id || obj.value=="" ){
addOption("itemId",waItemsJson[i].item_name,waItemsJson[i].item_name);
}
}
}

/**
* 删除objId下所有的options
*/
function removeAll(objId){
var obj=document.getElementById(objId);
obj.options.length=0;
}
/**
* objId下 添加 option
*/
function addOption(objId,text,value){
var obj=document.getElementById(objId);
obj.options.add(new Option(text,value)); //这个兼容IE与firefox
}
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航