當前位置:編程學習大全網 - 編程語言 - 詢問個編程方面的問題: 有關省市的選擇的code! 首先二級下拉聯動!省市的自動綁定到下拉框中!請賜教!

詢問個編程方面的問題: 有關省市的選擇的code! 首先二級下拉聯動!省市的自動綁定到下拉框中!請賜教!

壹種是把省市縣信息寫死在html中。js控制select的初始化賦值,將select的onchange事件調用js為下個select的賦值。

另壹種是把省市縣信息保存在數據庫中的,這就要使用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;

  • 上一篇:我的拿手好戲彈吉它作文
  • 下一篇:2019建築電氣與智能化專業怎麽樣、學什麽、前景好嗎
  • copyright 2024編程學習大全網