Chapter2.1-省份城市选择框的动态变化

下拉框主要用到<select>和<option>标签；

当对下拉框进行选择时，会触发change事件，我们可以通过对change事件监听来实现动态的选择框效果（例如选择江苏，第二个城市框内会出现江苏省内的城市）。

这里值得一提的是，当使用option标签设置选择框的内容时，如果不对其设置value值，那么它的value值默认为你设置的选择文本内容！例如这里的第6行，并没有对其设置value值，此时如果提交表单，它的value值为“安徽”！

[qzdypre]<select name="prov">

<option>省份</option>

<option value="js">江苏</option>

<option value="zj">浙江</option>

<option value="sd">山东</option>

<option>安徽</option>

<option value="jx">江西</option>

</select>

[/qzdypre]

接下来我们设置第二个选择框（城市）

[qzdypre]

<select name="city">

<option>城市</option>

</select>

[/qzdypre]

这个选择框内我们设置了“城市”选项。由于不同省份对应不同城市，接下来我们将通过JavaScript来实现动态效果。首先，我们需要获取这两个选择框，使用属性选择符“[属性]”来捕获省份和城市选择框。然后，我们将监听“change”事件，通过省份选择框提交的value值匹配对应的省份城市。

最后，我们将对第二个选择框（城市选择框）执行添加“<option>城市名</option>”标签的操作，从而实现城市选择框的动态修改。

[qzdypre]

<script type="text/javascript">

let sel_prov=document.querySelector("select[name=prov]");

let sel_city=document.querySelector("select[name=city]");

sel_prov.addEventListener("change",function (event){

let cur_opt=sel_prov[sel_prov.selectedIndex];

switch (cur_opt.value){

case "js":

sel_city.innerHTML+="<option>苏州</option><option>南通</option><option>无锡</option>"

 

 

break;

}

})

</script>

[/qzdypre]