另壹種是把省市縣信息保存在數據庫中的,這就要使用ajax。同樣在select的onchange事件中調用ajax,在ajax返回對應的信息後賦值給下個select。
如果使用了jquery的話js和ajax操作都將大大簡化。
下面給妳壹個js聯動的例子和壹些js操作select的例子,希望對妳能有幫助吧。
------------------------------參照這個例子的聯動方式------------------------------------------------
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
</head>
<script>
arr = new Array();
arr[1] = new Array(0,"基礎班");
arr[2] = new Array(47,"基礎操盤手班");
arr[3] = new Array(0,"高級班");
arr[4] = new Array(47,"金融匯錢班");
arr[5] = new Array(49,"無知班");
arr[6] = new Array(49,"幼稚班");function $(id){
return document.getElementById(id);
}
function show(value){
j=0
le = arr.length-1;
$("type2").options.length=0;
for(i=1;i<=le;i++){
if(arr[i][0]==value){
$("type2").options[j]=new Option(arr[i][1],arr[i][0]);j++;
}
}
}
function show1(value){
}
</script>
<body>
<select id="type1" onchange="show(this.value)">
<option value="47">基礎班</option>
<option value="49">高級班</option>
</select>
<select id="type2">
<option value="">--請選擇--</option>
</select>
</body>
</html>
-----------------------------------------over--------------------------------------------------------------------
---------------------下面是js對select的壹些操作,給妳做參考---------------------------------------------------------
Javascript 操作select控件大全(新增、修改、刪除、選中、清空) 2010-07-16
1、判斷select選項中 是否存在Value="paraValue"的Item
2、向select選項中 加入壹個Item
3、從select選項中 刪除壹個Item
4、刪除select中選中的項
5、修改select選項中 value="paraValue"的text為"paraText"
6、設置select中text="paraText"的第壹個Item為選中
7、設置select中value="paraValue"的Item為選中
8、得到select的當前選中項的value
9、得到select的當前選中項的text
10、得到select的當前選中項的Index
11、清空select的項
下面的 js 代碼與上面的序號對應:
// 1.判斷select選項中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
// 2.向select選項中 加入壹個Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判斷是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("該Item的Value值已經存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}
// 3.從select選項中 刪除壹個Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判斷是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功刪除");
} else {
alert("該select中 不存在該項");
}
}
// 4.刪除select中選中的項
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}
// 5.修改select選項中 value="paraValue"的text為"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判斷是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("該select中 不存在該項");
}
}
// 6.設置select中text="paraText"的第壹個Item為選中
function jsSelectItemByValue(objSelect, objItemText) {
//判斷是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出結果
if (isExit) {
alert("成功選中");
} else {
alert("該select中 不存在該項");
}
}
// 7.設置select中value="paraValue"的Item為選中
document.all.objSelect.value = objItemValue;
// 8.得到select的當前選中項的value
var currSelectValue = document.all.objSelect.value;
// 9.得到select的當前選中項的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.得到select的當前選中項的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
// 11.清空select的項
document.all.objSelect.options.length = 0;