前言

隨著人工智能的不斷發展，機器學習這門技術也越來越重要，很多人都開啟了學習機器學習，本文就介紹了機器學習的基礎內容，

一、使用Js制作一個簡單的省市聯動

如果想要簡單的實作下拉串列的聯動，我們要明確我們要用到的元素
1）：下拉串列標簽
2）：document.getElementById（）DOM獲取元素的方法
3）；onchange 事件

二、使用步驟

首先在HTML中撰寫我們的一個簡單下拉串列

小提示：大家定義ID名字時候，一定要定義一個有意義的，不要和我一樣

<select id="userHu" style="width: 150px">
<option value="" >-請選擇省-</option>
</select>
&nbsp;&emsp;
select id="userHu2" style="width: 150px">
<option value="0">-請選擇市-</option>
</select>

在這里插入圖片描述

1.開始在Js中撰寫我們即將要在下拉串列中顯示的內容：

代碼如下（示例）：

let ShengArray=["北京","山西","河北","山東","河南"];
let bjArray=["朝陽區","順義區","昌平區","海定區"];
let sxArray=["大同市","太原市","長治市","呂梁市"];
let hbArray=["張家口市","石家莊市","邯鄲市","唐山市"];
let sdArray=["德州市","濟南市","濟寧市","青島市"];
let  hnArray=["駐馬店市","開封市","洛陽市","安陽市"];

在這里插入圖片描述

2.這里就需要將我們要使用的陣列進一步的放在我們的二維陣列中

代碼如下（示例）：

let  shiArray=[bjArray,sxArray,hbArray,sdArray,hnArray];

在這里插入圖片描述

3.使用DOM獲取元素的方法

代碼如下（示例）：

let userHu = document.getElementById("userHu");
    userHu.innerHTML="<option value=''>--請選擇省--</option>";
    let p=0;
    for (let k of ShengArray) {
        userHu.innerHTML+="<option value="+p+">"+k+"</option>";
        p++;
    }

在這里插入圖片描述

4.使用onchange 事件

代碼如下（示例）：

userHu.onchange=function(){
   let val=this.value;
      if(val==""){
        return;
     }
     let userHu2=document.getElementById("userHu2");
     userHu2.innerHTML="<option value=''>-請選擇市--     </option>";
     let shiArr=shiArray[val];
     let e=0;
      for (let n of shiArr){
   userHu2.innerHTML+="<option value="+e+">"+n+"</option> ";
       e++;
      }
  }

在這里插入圖片描述

6.效果如圖

代碼如下（示例）：

在這里插入圖片描述

總結

提示：按照這樣的步驟，后面的縣、街道都可以實作，不過后期可以連接資料庫的時候，就不用手動輸入陣列了，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/254963.html

標籤：其他

上一篇：賽博朋克風格按鈕 html+css

下一篇：Vue創建組件詳解