js實現(xiàn)省份下拉菜單效果
更新時間：2017年02月15日 08:29:51 作者：蒙特利克
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)省份下拉菜單效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2個下拉框，選擇1級菜單后，2級菜單出現(xiàn)相應(yīng)的備選項。如果沒有選擇則不能提交。
先創(chuàng)建html文件
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<select id="province">
<option selected="selected">請選擇...</option>
</select>
<select id="city">
<option selected="selected">請選擇...</option>
</select>
<button type="submit" id="where_submit" disabled="disabled">提交</button>
</form>
</body>
<script type="text/javascript">
var provinces=['遼寧','北京','上海','吉林','浙江'];
//最新添加的省份放在最前面
var choice=['請選擇...']
var zhejiang=['杭州','嘉興','寧波','紹興'];
var shanghai=['金山','閘北','普陀','徐匯'];
var jilin=['長春','遼源','吉林','四平'];
var beijing=['海淀','朝陽','東城','西城'];
var liaoning=['沈陽','大連','盤錦','錦州','遼陽','鞍山']
//城市排序由后到前
var citys=new Array;
citys[0]=choice;
citys[1]=zhejiang;
citys[2]=jilin;
citys[3]=shanghai;
citys[4]=beijing;
citys[5]=liaoning;
function add_option(select,option){
var target=document.getElementById(select);
for (var i = option.length - 1; i >= 0; i--) {
var add_option=document.createElement("option");
add_option.text=option[i];
target.add(add_option,null);
target.lastChild.setAttribute("name",option[i]);
}
}
add_option("province",provinces);
document.getElementById("province").addEventListener("change",function(){
var selevted_province=document.getElementById("province");
var selected_city=document.getElementById("city");
for (var i = selevted_province.length - 1; i >= 0; i--) {
selected_city.remove(i);
}
var selected=selevted_province.selectedIndex;
if (selected==0) {
add_option("city",citys[0]);
document.getElementById("where_submit").setAttribute("disabled","ture");
}else{
add_option("city",citys[selected]);
document.getElementById("where_submit").removeAttribute("disabled");
}
})
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了Javascript中常用類型的格式化方法，其中包括格式化浮點數(shù)、格式化有符號整數(shù)(int32)、格式化無符號整數(shù)(uint32)、格式化布爾值以及格式化字符串等，文中給出了詳細(xì)的示例代碼，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
下面小編就為大家?guī)硪黄猨s中最容易被忽視的事件問題大總結(jié)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-05-05
這篇文章主要介紹了JavaScript?原始包裝類型匯總，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了JS實現(xiàn)左邊列表移到到右邊列表功能,實現(xiàn)功能主要是左邊的下拉框內(nèi)容添加到右邊的下拉框，支持多選移動，且同時將右邊的下拉框?qū)ο笠瞥?，需要的朋友可以參考?/div> 2018-03-03
這篇文章主要介紹了JS+HTML5 canvas繪制驗證碼,結(jié)合實例形式分析了HTML5 canvas圖形繪制相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
指定js可訪問其它域名的cookie的方法...2007-09-09
微信小程序picker組件簡單用法示例【附demo源碼下載】
這篇文章主要介紹了微信小程序picker組件簡單用法,結(jié)合實例形式詳細(xì)分析了picker組件的功能、使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-12-12
基于javascript實現(xiàn)頁面加載loading效果
這篇文章主要為大家詳細(xì)介紹了基于javascript實現(xiàn)頁面加載loading效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript獲取DOM元素的11種方法總結(jié)
這篇文章主要介紹了JavaScript獲取DOM元素的11種方法總結(jié),本文用分4大類11個方法總結(jié)如何獲取DOM元素,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了淺析JavaScript對象轉(zhuǎn)換成原始值，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下，需要的朋友可以參考一下2022-07-07最新評論