用js如何實現省市聯動,自己編寫的仿京東移動端的省市聯動選擇JQuery插件

 2023-10-05 阅读 23 评论 0

摘要:概述 什么是插件,插件就是即插即用叫插件,很少的配置,很少的代碼就可以用都項目里,之所以做這個插件,是因為做了一個省市區的聯動,其他項目如果要用怎么辦,難道在ctrl+c,ctrl+v?那樣做太low,做

概述

什么是插件,插件就是即插即用叫插件,很少的配置,很少的代碼就可以用都項目里,之所以做這個插件,是因為做了一個省市區的聯動,其他項目如果要用怎么辦,難道在ctrl+c,ctrl+v?那樣做太low,做個插件吧,于是乎就開始了Jquery插件制作之旅。

用js如何實現省市聯動,?

使用效果

html制作京東快速購物導航、?

獲取使用

代碼開源,已經托管在git上,地址如下,希望大家賞臉給個星

https://gitee.com/jangojing/JqueryCitySelectPlug

?

1.引入js、css和移動端的meta

引入jquery版本無所謂,demo里的版本較老,就懶得換了,其次引入插件對應的js和css

加入移動端的meta是移動端開發的前提

        <script src="Scripts/jquery-1.4.1.min.js"></script><script src="Scripts/CitySelect/citySelectPlug.js"></script><link rel="stylesheet" href="Scripts/CitySelect/citySelectPlug.css" type="text/css" />
     <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

?

2.編輯html綁定jquery事件

html里放入一個input,用jquery綁定一個jquery事件

	<form action="submit.aspx" method="GET">請選擇省市區:<br /><input type="text" name="citySelect" value="" id="citySelect" /><input type="submit" value="提交" /></form>      <script>$().ready(function () {$("#citySelect").citySelectPlug({ ajaxUrl: 'GetArea.ashx' });});</script>

?

3. 處理ajax請求

注意到這里有個ajaxUrl,這個是配置你項目的ajax請求的路徑的。既然要做聯動,肯定需要ajax請求,通過當前選擇的id去找下一級的id。

ajax請求會調用對應的地址,攜帶id為參數,id就是用戶點擊的那個省的id或者市的id,根據這個id繼續找下一級

這里ajax請求需要返回的結果是json格式的數據如下所示:

[{"ID":606,"Name":"市轄區"},{"ID":123,"Name":"高淳區"},{"ID":234,"Name":"鼓樓區"}]

包含id和name的數組。

?

4. 完了?  

就這樣就完了? 是的,插件就是少量的配置,少量的代碼,即插即用。

?

5. 兼容性申明

手邊的設備不全,測試過的設備有iphone 6s,iphone 5s,華為P8,華為榮耀3臺,一款很老的HTC,努比亞一臺。

針對ios處理了輸入框獲得焦點自動居中的問題。

針對華為手機處理了鍵盤打開狀態下觸發屏幕可見范圍高度不夠導致彈出層高度只有半幅頁面的問題。

?

轉載于:https://www.cnblogs.com/JangoJing/p/7606433.html

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/2/118000.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息