关于两个Select与a的赋值的JS脚本

最新推荐文章于 2024-06-20 09:46:43 发布

最新推荐文章于 2024-06-20 09:46:43 发布 · 185 阅读

文章标签：

#脚本 #.net #HTML

work experience 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个使用JavaScript动态生成HTML下拉菜单选项的方法。通过面向对象的方式定义了不同省份及其对应的主要城市，实现了根据用户选择省份后自动更新城市列表的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<select onchange="showsp(this)">
    <option>请选择需要查看的信息:</option>
    <option value="gd">gz</option>
    <option value="hn">hn</option>
    <option value="hb">hb</option>
    <option value="sc">sc</option>
    <option value="yn">yn</option>
    <option value="fj">fj</option>
 </select>

 <select id="sp" onchange="show(this)">
 </select>
<a id="aa" href="http://www.taiheinfo.net"/>aa

<script>
function show(slt){
    if(slt.selected=true){
        document.getElementById("aa").href=slt.value+".html";
    }
}

//利用面向对象的思维定义省份对象
function province(){
    var gd=new Array();
    gd.push("广州","韶关");
    this.gd=gd;
    var hn=new Array();
    hn.push("长沙");
    this.hn=hn;
    var hb=new Array();
    hb.push("武汉");
    this.hb=hb;
    var sc=new Array();
    sc.push("成都");
    this.sc=sc;
    var fj=new Array();
    fj.push("厦门");
    this.fj=fj;
    var yn=new Array();
    yn.push("昆明");
    this.yn=yn;
}

//利用new来创建省份对象
var p=new province();
//显示对应省份的城市
function showsp (sp){
    //清空城市的选择框
    clu();
    //判断是否选择了省份
    if(sp.selected=true){
        //遍历省份的所有城市，并赋值给城市选择框
        for(var i=0;i<p[sp.value].length;i++){
            //创建一个Option
            var oOption = document.createElement("option");
            //将option添加到城市选择框中
            document.getElementById("sp").options.add(oOption);
            document.getElementById("sp").options[0].selected=true;
            //为option赋值
            oOption.innerText =p[sp.value][i];
            oOption.value =p[sp.value][i];
        }
    }
}
function clu()
 {
    //当有城市的时候，就清空
    while(sp.length>0){
          sp.options[0]=null;
      }
  }
</script>