Rumah hujung hadapan web tutorial js JS做出地址选择功能

JS做出地址选择功能

Apr 19, 2018 am 10:23 AM
javascript Fungsi pilih

这次给大家带来JS做出地址选择功能,JS做出地址选择功能的注意事项有哪些,下面就是实战案例,一起来看一下。        

<!DOCTYPE html>
<html>
  <head>
    <metacharset="UTF-8">
    <title></title>
    <script>
      var shenArr = new Array(5);
      shenArr["广东"] = ["广州","深圳","韶关","汕头","茂名"];
      shenArr["湖南"] = ["长沙","张家界","株洲","岳阳","吉首"];
      shenArr["湖北"] = ["武汉","宜昌","荆州","黄冈","仙桃"];
      shenArr["安徽"] = ["合肥","黄山"];
      shenArr["河南"] = ["郑州","开封","洛阳","信阳"];
       function getShen(){
        var s = document.getElementById("shen");
        for(var v in shenArr){
          //把数组键加入到省的下拉框
          s.add(new Option(v,v),null);
        }
       }
 
      function getCity(){
        var s = document.getElementById("shen");
        var c = document.getElementById("city");
        var v = s.value;//省份的名称,也是数组中的键
        c.options.length = 0;//把城市下拉框中的项清除
 
        //循环把某一个省的城市加入到市的下拉框
        for(var i in shenArr[v] ){
          c.add(new Option(shenArr[v][i],shenArr[v][i]),null);
        }
 
      }
 
    </script>
  </head>
  <bodyonload="getShen()">
    省:<selectid="shen"onchange="getCity()">
      <optionvalue="0">--请选择--</option>
    </select>
    市:<selectid="city"></select>
  </body>
</html>
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

input输入框内容实时获取

vue实现点击图片放大功能(附代码)

Atas ialah kandungan terperinci JS做出地址选择功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menetapkan kertas dinding skrin kunci pada enjin kertas dinding? Cara menggunakan enjin kertas dinding Bagaimana untuk menetapkan kertas dinding skrin kunci pada enjin kertas dinding? Cara menggunakan enjin kertas dinding Mar 13, 2024 pm 08:07 PM

Bagaimana untuk menetapkan kertas dinding skrin kunci pada enjin kertas dinding? Cara menggunakan enjin kertas dinding

Bolehkah enjin kertas dinding dikongsi sesama keluarga? Bolehkah enjin kertas dinding dikongsi sesama keluarga? Mar 18, 2024 pm 07:28 PM

Bolehkah enjin kertas dinding dikongsi sesama keluarga?

Perbezaan antara vivox100s dan x100: perbandingan prestasi dan analisis fungsi Perbezaan antara vivox100s dan x100: perbandingan prestasi dan analisis fungsi Mar 23, 2024 pm 10:27 PM

Perbezaan antara vivox100s dan x100: perbandingan prestasi dan analisis fungsi

Adakah terdapat sebarang virus semasa menonton filem enjin kertas dinding? Adakah terdapat sebarang virus semasa menonton filem enjin kertas dinding? Mar 18, 2024 pm 07:28 PM

Adakah terdapat sebarang virus semasa menonton filem enjin kertas dinding?

Dalam folder manakah terdapat kertas dinding enjin kertas dinding? Dalam folder manakah terdapat kertas dinding enjin kertas dinding? Mar 19, 2024 am 08:16 AM

Dalam folder manakah terdapat kertas dinding enjin kertas dinding?

Adakah enjin kertas dinding menggunakan banyak kuasa? Adakah enjin kertas dinding menggunakan banyak kuasa? Mar 18, 2024 pm 08:30 PM

Adakah enjin kertas dinding menggunakan banyak kuasa?

Apakah sebenarnya media kendiri? Apakah ciri dan fungsi utamanya? Apakah sebenarnya media kendiri? Apakah ciri dan fungsi utamanya? Mar 21, 2024 pm 08:21 PM

Apakah sebenarnya media kendiri? Apakah ciri dan fungsi utamanya?

Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya Mar 09, 2024 am 08:21 AM

Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya

See all articles