下拉框主要用到<select>和<option>标签;
当对下拉框进行选择时,会触发change事件,我们可以通过对change事件监听来实现动态的选择框效果(例如选择江苏,第二个城市框内会出现江苏省内的城市)。
这里值得一提的是,当使用option标签设置选择框的内容时,如果不对其设置value值,那么它的value值默认为你设置的选择文本内容!例如这里的第6行,并没有对其设置value值,此时如果提交表单,它的value值为“安徽”!
<select name="prov">
<option>省份</option>
<option value="js">江苏</option>
<option value="zj">浙江</option>
<option value="sd">山东</option>
<option>安徽</option>
<option value="jx">江西</option>
</select>
接下来我们设置第二个选择框(城市)
<select name="city">
<option>城市</option>
</select>
这个选择框内我们设置了“城市”选项。由于不同省份对应不同城市,接下来我们将通过JavaScript来实现动态效果。首先,我们需要获取这两个选择框,使用属性选择符“[属性]”来捕获省份和城市选择框。然后,我们将监听“change”事件,通过省份选择框提交的value值匹配对应的省份城市。
最后,我们将对第二个选择框(城市选择框)执行添加“<option>城市名</option>”标签的操作,从而实现城市选择框的动态修改。
<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>