jQuery技術 根據省份的選擇動態載入相應城市

jquery技術是js技術的乙個框架,可以利用它強大的功能動態顯示一些控制項.下面是乙個非常有意思和實用的情境,對於鞏固jquery技術十分有用,我們也可以充分體會到其強大之處!

情景假設:現有乙個頁面,

1.要求先載入所有省份的核取方塊(其中包含乙個*的checkbox,當選擇此項時,表明不特指某個省份,將載入所有城市).如果勾選或取消勾選某一省份的核取方塊時,會載入或去除對應的城市核取方塊;

同時,會顯示已選擇的省份。

2.勾選或取消勾選某一城市的核取方塊時,會顯示已選擇的城市.

需要注意的問題:

1.如果已經選擇了某一特定省份時,並不允許再選擇*,因為邏輯上並不成立;同理,如果事先選擇*時,再選擇某一省份也是不允許的.除非取消勾選.(即*和特定省份不能同時選中)

2.根據省份"過濾"相應城市,是為了避免使用ajax技術把省份id傳給後台引起互動.

3.標籤在js中的運用.

後台資料庫肯定有獲取省份列表和城市列表的方法.table_province含有id,name欄位(如果id=-1 對應*);而table_city含有id,name,parentid欄位(parentid對應該城市所在省份的id)

html頁面:

選擇省份:*

選擇地市
已選擇的省份：*
已選擇的城市：*

獲得省份列表和城市列表的js:

//省份列表

var provlist = new array();
var str = new array();
str.push('');
str.push('');
provlist.push(str); 
//城市列表
var citylist = new array();
var str = new array();
str.push('');
str.push('');
str.push('');
citylist.push(str);

載入省份核取方塊列表的js：

setprov();

function setprov() 
}

根據省份過濾出相應城市,並組成核取方塊控制項列表:

function filtercity(provid) elseelse}}

}}else if(provid == -1) else}}
} //step2.處理顯示[已選省份]
if(jquery("#provid"+provid).attr("checked") == true) else
}

根據所選城市與否,顯示出所選擇的城市的js:

function changecity(cityid) else 

}

特別注意:

1.如果要將所選擇的城市和省份的值提交到後台,建議在顯示所選省份和城市的li中間加乙個形如的隱藏域.

2.checkbox的value值只是被後台根據name來進行提交的,並不用於顯示出來,所以需加乙個span控制項顯示.

jQuery技術 根據省份的選擇動態載入相應城市

jquery技術是js技術的乙個框架,可以利用它強大的功能動態顯示一些控制項.下面是乙個非常有意思和實用的情境,對於鞏固jquery技術十分有用,我們也可以充分體會到其強大之處 情景假設 現有乙個頁面,1.要求先載入所有省份的核取方塊 其中包含乙個 的checkbox,當選擇此項時,表明不特指某個省...

jquery根據name屬性的高階選擇

div id 選擇所有含有id屬性的div元素 input name keleyicom 選擇所有的name屬性等於 keleyicom 的input元素 input name keleyicom 選擇所有的name屬性不等於 keleyicom 的input元素 input name keleyi...

根據省份選擇城市的功能（連線資料庫的）

根據http blog.csdn.net huangzhe10 archive 2010 08 18 5819802.aspx建立兩個表，分別為省份表tb province，城市表tb city。如上圖所示布局，左側combobox顯示省份列表，右側combobox顯示城市列表 雙擊form的空白處...