用Jquery+Ajax+xml制作三级联动效果
下面小编就为大家带来一篇Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文主要介绍使用 Jquery+Ajax+xml,首先需要一个包含我国所有地图信息的xml文档。
此处选用的xml文档(共1000多行)主要结构如下:
<?xml version="1.0" encoding="utf-8"?> <area Country="China"> <province ID="1" provinceID="110000" province="北京市"> <City CityID="110100" City="市辖区"> <Piecearea PieceareaID="110101" Piecearea="东城区" /> <Piecearea PieceareaID="110102" Piecearea="西城区" /> <Piecearea PieceareaID="110103" Piecearea="崇文区" /> <Piecearea PieceareaID="110104" Piecearea="宣武区" /> <Piecearea PieceareaID="110105" Piecearea="朝阳区" /> <Piecearea PieceareaID="110106" Piecearea="丰台区" /> <Piecearea PieceareaID="110107" Piecearea="石景山区" /> <Piecearea PieceareaID="110108" Piecearea="海淀区" /> <Piecearea PieceareaID="110109" Piecearea="门头沟区" /> <Piecearea PieceareaID="110111" Piecearea="房山区" /> <Piecearea PieceareaID="110112" Piecearea="通州区" /> <Piecearea PieceareaID="110113" Piecearea="顺义区" /> <Piecearea PieceareaID="110114" Piecearea="昌平区" /> <Piecearea PieceareaID="110115" Piecearea="大兴区" /> <Piecearea PieceareaID="110116" Piecearea="怀柔区" /> <Piecearea PieceareaID="110117" Piecearea="平谷区" /> </City> <province>
制作对应的表单,根据设置选择省/市的动作:
<h2>地区三级联动菜单</h2> 省:<select id="province" onchange="showcity()"><option value="0">-请选择-</option></select> 市:<select id="city" onchange="showdistrict()"><option value="0">-请选择-</option></select> 地区:<select id="district"><option value="0">-请选择-</option></select>
以下是JS代码行
//声明一个全局变量,用于存储第一次请求的xml信息,避免后续多次频繁请求xml var xmldom =null; //获取并显示省份信息 function showprovince(){ //使用ajax去服务器获得xml文件里面的省份信息 $.ajax({ url:'./ChinaArea.xml', //data: dataType:'xml',//相当于调用responseXML type:'get', success:function(msg){ //将返回的xml信息赋予xmldom xmldom = msg; //获得province 元素节点对象 var prov = $(msg).find('province'); //遍历省份信息 prov.each(function(k,v){ var nm = $(this).attr('province'); var id = $(this).attr('provinceID'); //追加到指定的节点 $('#province').append("<option value="+id+">"+nm+"</option>"); }); } }); } //网页加载显示省份信息 $(function(){ showprovince(); }); function showcity(){ //获取 省份 的id var pid = $('#province option:selected').val(); //根据xmldom信息 找到指定的省份节点 var xml_province = $(xmldom).find('province[provinceID='+pid+']'); // 获取对应所有县市节点 var city = $(xml_province).find('City'); //在遍历追加前,先清空此前已经显示的信息 $('#city').empty(); $('#city').append('<option value="0">-请选择-</option>'); //遍历追加县市 city.each(function(k,v){ var nm = $(this).attr('City'); var id = $(this).attr('CityID'); $('#city').append('<option value='+id+'>'+nm+'</option>'); }); } //以下函数的逻辑与showcity()的逻辑一致 function showdistrict(){ //获取 县市 的id var cid = $('#city option:selected').val(); //根据xmldom信息 找到指定的县市节点 var xml_city = $(xmldom).find('City[CityID='+cid+']'); // 获取对应所有地区节点 var district = $(xml_city).find('Piecearea'); $('#district').empty(); $('#district').append('<option value="0">-请选择-</option>'); district.each(function(k,v){ var nm = $(this).attr('Piecearea'); var id = $(this).attr('PieceareaID'); $('#district').append('<option value='+id+'>'+nm+'</option>'); }); }
Atas ialah kandungan terperinci 用Jquery+Ajax+xml制作三级联动效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Anda mungkin menghadapi masalah garis hijau yang muncul pada skrin telefon pintar anda Walaupun anda tidak pernah melihatnya, anda mesti melihat gambar berkaitan di Internet. Jadi, pernahkah anda menghadapi situasi di mana skrin jam tangan pintar bertukar menjadi putih? Pada 2 April, CNMO mendapat tahu daripada media asing bahawa seorang pengguna Reddit berkongsi gambar di platform sosial, menunjukkan skrin jam tangan pintar siri Samsung Watch bertukar menjadi putih. Pengguna menulis: "Saya sedang mengecas apabila saya pergi, dan apabila saya kembali, ia adalah seperti ini. Saya cuba untuk memulakan semula, tetapi skrin masih seperti ini semasa proses mulakan semula skrin jam tangan pintar Samsung Watch." Pengguna Reddit tidak menyatakan model khusus. Walau bagaimanapun, jika dilihat dari gambar, ia sepatutnya Samsung Watch5. Sebelum ini, seorang lagi pengguna Reddit turut melaporkan

Bercakap tentang ASSASSIN, saya percaya pemain pasti akan memikirkan pembunuh utama dalam "Assassin's Creed". casis domestik/bekalan kuasa/penyejukan yang terkenal Siri ASSASSIN radiator penyejuk udara utama daripada jenama perkakas DeepCool bertepatan antara satu sama lain. Baru-baru ini, produk terbaharu siri ini, ASSASSIN4S, telah dilancarkan "Assassin in Suit, Advanced" membawakan pengalaman penyejukan udara baharu kepada pemain maju. Penampilannya penuh dengan perincian. Radiator Assassin 4S menggunakan struktur menara berkembar + reka bentuk terbina dalam kipas tunggal warna untuk memenuhi warna yang berbeza

Kembara melalui keluasan dan jejakkan kaki ke perjalanan ke barat! Hari ini, Zhengtu IP secara rasmi mengumumkan bahawa ia akan melancarkan kerjasama rentas sempadan dengan animasi CCTV "Journey to the West" untuk bersama-sama mencipta pesta kebudayaan yang menggabungkan tradisi dan inovasi! Kerjasama ini bukan sahaja menandakan kerjasama yang mendalam antara dua jenama klasik domestik utama, tetapi juga menunjukkan usaha yang tidak putus-putus dan kegigihan siri Journey dalam mempromosikan budaya tradisional Cina. Sejak kelahirannya, siri Zhengtu telah digemari oleh pemain kerana warisan budaya yang mendalam dan permainan yang pelbagai. Dari segi warisan budaya, siri Zhengtu sentiasa mengekalkan rasa hormat dan cinta kepada budaya tradisional Cina, dan menyepadukan unsur budaya tradisional dengan mahir ke dalam permainan, membawa lebih keseronokan dan inspirasi kepada pemain. Animasi CCTV "Journey to the West" adalah klasik yang mengiringi pertumbuhan generasi.

Dengan ketibaan musim bunga, segala-galanya pulih dan segala-galanya penuh dengan daya hidup dan kecergasan. Dalam musim yang indah ini, bagaimana untuk menambah sentuhan warna pada kehidupan rumah anda? Projektor Haqu H2, dengan reka bentuk yang indah dan keberkesanan kos yang tinggi, telah menjadi keindahan yang sangat diperlukan pada musim bunga ini. Projektor H2 ini padat tetapi bergaya. Sama ada diletakkan di atas kabinet TV di ruang tamu atau di sebelah meja sisi katil di dalam bilik tidur, ia boleh menjadi landskap yang indah. Badannya diperbuat daripada tekstur matte putih susu Reka bentuk ini bukan sahaja menjadikan projektor kelihatan lebih maju, tetapi juga meningkatkan keselesaan sentuhan. Bahan bertekstur kulit kuning air menambah sentuhan kemesraan dan keanggunan pada penampilan keseluruhan. Gabungan warna dan bahan ini bukan sahaja menepati trend estetik rumah moden, tetapi juga boleh diintegrasikan ke dalam

Dengan saiznya yang padat, platform ITX telah menarik ramai pemain yang mengejar keindahan terunggul dan unik Dengan peningkatan proses pembuatan dan kemajuan teknologi, kedua-dua kad grafik siri Core dan RTX40 generasi ke-14 Intel boleh menggunakan kekuatan mereka pada platform ITX, dan. pemain juga Terdapat keperluan yang lebih tinggi untuk bekalan kuasa SFX. Penggemar permainan Huntkey telah melancarkan bekalan kuasa siri MX baharu Dalam platform ITX yang memenuhi keperluan berprestasi tinggi, bekalan kuasa modul penuh MX750P mempunyai kuasa penarafan sehingga 750W dan telah lulus pensijilan tahap platinum 80PLUS. Di bawah kami bawakan penilaian bekalan kuasa ini. Bekalan kuasa modul penuh Huntkey MX750P menggunakan konsep reka bentuk yang ringkas dan bergaya Terdapat dua model hitam dan putih untuk dipilih oleh pemain kedua-duanya menggunakan rawatan permukaan matte dan mempunyai tekstur yang baik dengan fon perak kelabu dan merah.

Model besar yang boleh menganalisis kandungan PDF, halaman web, poster dan carta Excel secara automatik tidak terlalu mudah untuk pekerja. Model InternLM-XComposer2-4KHD (disingkat IXC2-4KHD) yang dicadangkan oleh Shanghai AILab, Universiti China Hong Kong dan institusi penyelidikan lain menjadikan perkara ini menjadi kenyataan. Berbanding dengan model besar berbilang modal lain yang mempunyai had resolusi tidak lebih daripada 1500x1500, kerja ini meningkatkan imej input maksimum model besar berbilang mod kepada lebih resolusi 4K (3840x1600) dan menyokong sebarang nisbah aspek dan 336 piksel kepada 4K Perubahan resolusi dinamik. Tiga hari selepas dikeluarkan, model itu mengungguli senarai populariti model menjawab soalan visual HuggingFace. Mudah dikendalikan

1. Mulakan PPT, buat dokumen kosong baharu, pilih semua kotak teks dan padamkannya. 2. Jalankan arahan Sisip-Bentuk, seret segi empat tepat dalam dokumen dan isikan bentuk dengan hitam. 3. Seret segi empat tepat untuk memanjangkannya, laksanakan arahan Sisip-Bentuk, seret keluar segi empat sama kecil, dan tetapkan warna isian kepada putih. 4. Salin dan tampal petak kecil satu demi satu supaya bahagian atas dan bawah diagihkan sama rata pada kedua-dua belah filem Selepas memilih semuanya dengan ctrl+a, klik kanan dan pilih Kumpulan. 5. Jalankan arahan Insert-Picture, cari gambar yang hendak disisipkan dalam kotak dialog pop timbul, klik untuk membuka, dan laraskan saiz dan kedudukan gambar. 6. Ulangi langkah 5 untuk memasukkan dan menetapkan gambar yang tinggal untuk membentuk gambar filem. 7. Pilih filem, laksanakan arahan animasi-tambah animasi

Bagaimana cara membuat kulit novel Tomato? Anda boleh membuat kulit novel eksklusif dalam novel Tomato, tetapi kebanyakan rakan tidak tahu cara membuat kulit novel Tomato Seterusnya adalah gambar cara membuat kulit novel Tomato yang dibawakan editor kepada pemain Tutorial, pemain yang berminat datang dan lihat! Tutorial penggunaan Novel Tomato Cara membuat kulit Novel Tomato 1. Mula-mula buka APP Novel Tomato, masukkan halaman pengurusan kerja untuk membuat buku baharu, dan pilih [Templat Kulit] seperti yang ditunjukkan oleh anak panah dalam gambar di bawah 2. Kemudian masukkan halaman templat muka depan dan pilih Templat muka depan kegemaran anda 3. Selepas memilih penutup, klik [Sahkan] di sudut kanan atas.
