jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)
更新時(shí)間：2014年02月22日 09:19:40 作者：
本篇文章主要是對(duì)jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
省市對(duì)應(yīng)的實(shí)現(xiàn)：<還有一些沒(méi)封裝起來(lái)>
更具選擇的省份來(lái)確定市的內(nèi)容
jsp代碼：
復(fù)制代碼 代碼如下:
<body>
省份<select name="prin">
<option>--請(qǐng)選擇--</option>
<option>福建</option>
<option>北京</option>
<option>山東</option>
<option>上海</option>
</select>
縣、市<select id="sel2">
<option>--請(qǐng)選擇--</option>
</select>
</body>
js代碼：
復(fù)制代碼 代碼如下:
function appendShi(shi) {//字符串拼接，拼接市區(qū)
var fjs='';
for(var i=0;i<shi.length;i++)
{
fjs += '<option>' + shi[i]+ '</option>';
}
return fjs;
}
$(function() {
var prince = ['福建','北京','山東','上海'];
var fjs = ['廈門(mén)','泉州','福州'];
var bjs = ['北京','朝陽(yáng)區(qū)','海淀區(qū)','平谷區(qū)'];
var shs = ['黃浦區(qū)','長(zhǎng)寧區(qū)','寶山區(qū)','嘉定區(qū)'];
var sds = ['濟(jì)南','青島','煙臺(tái)','日照','萊蕪','sss'];
$("select[name='prin']").change(function() {
var shi = $("#sel2");//得到第二個(gè)select
var prin = $("select[name='prin'][select option:selected]");//得到選中的身份的值
var newShiSel = $('<select id="sel2"><option>--請(qǐng)選擇--</option></select>');//
if (prin.val() == '福建'){
newShiSel.append(appendShi(fjs));
}
if (prin.val() == '北京') {
newShiSel.append(appendShi(bjs));
}
if (prin.val() == '上海') {
newShiSel.append(appendShi(shs));
}
if (prin.val() == '山東') {
newShiSel.append(appendShi(sds));
}
shi.replaceWith(newShiSel);
});
});
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式淘寶動(dòng)畫(huà)效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式淘寶動(dòng)畫(huà)效果,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2018-02-02
基于jQuery實(shí)現(xiàn)照片墻自動(dòng)播放特效
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)照片墻自動(dòng)播放特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了jQuery阻止事件冒泡的方法,結(jié)合實(shí)例形式分析了jQuery阻止事件冒泡的原理、常用實(shí)現(xiàn)方法,并結(jié)合完整實(shí)例形式分析了jQuery阻止事件冒泡的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Jquery焦點(diǎn)圖實(shí)例代碼,詳細(xì)講述了使用jQuery實(shí)現(xiàn)焦點(diǎn)圖的詳細(xì)步驟,代碼中備有較為詳盡的注釋說(shuō)明,便于大家理解,需要的朋友可以參考下2014-11-11
jQuery插件FusionWidgets實(shí)現(xiàn)的Cylinder圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionWidgets實(shí)現(xiàn)的Cylinder圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionWidgets結(jié)合swf文件讀取xml數(shù)據(jù)并采用Cylinder圖展示的相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
再說(shuō)AutoComplete自動(dòng)補(bǔ)全之實(shí)現(xiàn)原理
再說(shuō)AutoComplete自動(dòng)補(bǔ)全之實(shí)現(xiàn)原理,這里以asp.net后臺(tái)為主，考慮到性能最好是生成xml并入緩存。2011-11-11
Jquery change(fontsize,background) 改變顏色與背景的代碼
基于Jquery的改變顏色與背景的代碼，對(duì)于學(xué)習(xí)jquery的朋友可以參考下。2010-05-05
jQuery使用DataTable實(shí)現(xiàn)刪除數(shù)據(jù)后重新加載功能
利用jQuery Datatable和artTemplate組合來(lái)做的表格。但是當(dāng)刪除數(shù)據(jù)時(shí)，需要重新加載table里的數(shù)據(jù)。接下來(lái)通過(guò)本文給大家分享jQuery使用DataTable實(shí)現(xiàn)刪除數(shù)據(jù)后重新加載功能，需要的朋友參考下2017-02-02
Jquery實(shí)現(xiàn)上下移動(dòng)和排序代碼
這篇文章主要介紹了Jquery實(shí)現(xiàn)上下移動(dòng)和排序,想要學(xué)習(xí)Jquery的同學(xué)可以來(lái)了解一下。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-10-10
Js與Jq 獲取頁(yè)面元素值的方法和差異對(duì)比
這篇文章主要介紹了原生js獲取瀏覽器和對(duì)象寬高與jquery獲取瀏覽器和對(duì)象寬高的方法關(guān)系對(duì)比,十分實(shí)用，需要的朋友可以參考下2015-04-04