zoukankan      html  css  js  c++  java
  • js动态添加select菜单 联动菜单

    原文发布时间为:2009-11-14 —— 来源于本人的百度文章 [由搬家工具导入]

    <html>

    <head>

    <title>http://hi.baidu.com/handboy</title>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <style>

    <!--

    body          { font-size: 14px }

    -->

    </style>

    </head>

    <body bgcolor=#FFFFFF alink=#333333 vlink=#333333 link=#333333 topmargin=0 leftmargin=0>

    <form>

    <script language="javascript">

    <!--

    function LoandCity(provinceID)

    {

    switch (provinceID)

    {

        //

       case "1":

       //清空select

        document.getElementById("city").options.length=0;

       //添加SELECT 这个地方我们可以自己调用数据里面的数据

        document.getElementById("city").options.add(new Option("宣武区","1"));

        document.getElementById("city").options.add(new Option("海淀区","2"));

      

        break

       case "2":

        document.getElementById("city").options.length=0;

        document.getElementById("city").options.add(new Option("黄浦区","1"));

        document.getElementById("city").options.add(new Option("闸北区","2"));

        break

       default:

        alert("错误类型");

        break

      

    }

    }

    -->

    </script>

    <body>

    <form name="form1" >

    <select id="province" onChange = "LoandCity(this.value);">

    <!--这个地方我们可以自己调用数据库里面的省份-->

    <option value="1">北京</option>

    <option value="2">上海</option>

    </select> 城市 <select id="city" ></select><br>
    <script type="text/javascript">LoandCity('1');</script>
    </form>

    </body>

    </html>

    可能会遇见一些问题,可以见这篇文章回发或回调参数无效 “HtmlSelect”不能有类型为“LiteralControl”的子级

    =====================

    1 检测是否有选中

    if (objSelect.selectedIndex > - 1 ) {

    // 说明选中

    } else {

    // 说明没有选中

    }

    2 删除被选中的项

    objSelect.options[objSelect.selectedIndex] = null ;

    3 增加项

    objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );

    4 修改所选择中的项

    objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );

    5 得到所选择项的文本

    objSelect.options[objSelect.selectedIndex].text;

    6 得到所选择项的值

    objSelect.options[objSelect.selectedIndex].value;

  • 相关阅读:
    Docker--简介&&安装
    Mycat
    Mysql--主从复制
    Nginx--平滑升级
    Nginx--rewrite
    Nginx--缓存
    Mysql--SQL语句
    Nginx--虚拟主机
    Nginx--反向代理&&负载均衡
    Nginx--用户认证&&访问控制&&限速&&状态访问
  • 原文地址:https://www.cnblogs.com/handboy/p/7158325.html
Copyright © 2011-2022 走看看