JS select 二级联动-CSDN博客

本文链接：https://blog.csdn.net/iteye_17839/article/details/81966166

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> test </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<style type="text/css">

</style>
</HEAD>
<BODY>
<select id="search_categroy" οnchange="javaScript:selectCategory(this.selectedIndex);">
<option οnclick="javascript:addoptions(',1,2')">category1</option>
<option οnclick="javascript:addoptions(',3,4,5,6')">category2</option>
</select>
<select id="search_forum">
<option value="">--select--</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</select>
<script type="text/javascript">

var categoryWithForums={};

(function(){
var selectForums=document.getElementById('search_forum');
for(var i=0;i<selectForums.options.length;i++){
categoryWithForums['forum'+selectForums.options[i].value]=selectForums.options[i];
}
selectForums.options.length=0;
selectCategory(0);
})();

function selectCategory(index){
var selectCategories=document.getElementById('search_categroy');
if(selectCategories.options.length==0)return;
selectCategories.options[index].selected=true;
selectCategories.options[index].onclick();
}

function addoptions(ids,select){
var selectForums=document.getElementById('search_forum');
selectForums.options.length=0;
ids=ids.replace(" ").split(",");
for(var i=0;i<ids.length;i++){
selectForums.options.add(categoryWithForums['forum'+ids[i]]);
if(ids[i]==select){selectForums.options[selectForums.options.length-1].selected=true;}
}
selectForums.focus();
}
</script>
</BODY>
</HTML>