精华内容
下载资源
问答
  • HTML 下拉列表 代码

    2015-09-26 14:46:00
    DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <h...
    <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>css菜单演示</title>
    
    
    <style type="text/css">
    <!--
    
    *{margin:0;padding:0;border:0;}
    body {
    	font-family: arial, 宋体, serif;
            font-size:12px;
    }
    
    
    #nav {
    	 line-height: 24px;  list-style-type: none; background:#666;
    }
    
    #nav a {
    	display: block; width: 80px; text-align:center;
    }
    
    #nav a:link  {
    	color:#666; text-decoration:none;
    }
    #nav a:visited  {
    	color:#666;text-decoration:none;
    }
    #nav a:hover  {
    	color:#FFF;text-decoration:none;font-weight:bold;
    }
    
    #nav li {
    	float: left; width: 80px; background:#CCC;
    }
    #nav li a:hover{
    	background:#999;
    }
    #nav li ul {
    	line-height: 27px;  list-style-type: none;text-align:left;
    	left: -999em; width: 180px; position: absolute; 
    }
    #nav li ul li{
    	float: left; width: 180px;
    	background: #F6F6F6; 
    }
    
    
    #nav li ul a{
    	display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;
    }
    
    #nav li ul a:link  {
    	color:#666; text-decoration:none;
    }
    #nav li ul a:visited  {
    	color:#666;text-decoration:none;
    }
    #nav li ul a:hover  {
    	color:#F3F3F3;text-decoration:none;font-weight:normal;
    	background:#C00;
    }
    
    #nav li:hover ul {
    	left: auto;
    }
    #nav li.sfhover ul {
    	left: auto;
    }
    #content {
    	clear: left; 
    }
    
    
    -->
    </style>
    
    <script type=text/javascript><!--//--><![CDATA[//><!--
    function menuFix() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("li");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].οnmοuseοver=function() {
    		this.className+=(this.className.length>0? " ": "") + "sfhover";
    		}
    		sfEls[i].onMouseDown=function() {
    		this.className+=(this.className.length>0? " ": "") + "sfhover";
    		}
    		sfEls[i].onMouseUp=function() {
    		this.className+=(this.className.length>0? " ": "") + "sfhover";
    		}
    		sfEls[i].οnmοuseοut=function() {
    		this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
    
    "");
    		}
    	}
    }
    window.οnlοad=menuFix;
    //more javascript from http://www.webjx.com
    //--><!]]></script>
    
    </head>
    <body>
    
    
    <ul id="nav">
    <li><a href="#">产品介绍</a>
    	<ul>
    	<li><a href="#">产品一</a></li>
    	<li><a href="#">产品一</a></li>
    	<li><a href="#">产品一</a></li>
    	<li><a href="#">产品一</a></li>
    	<li><a href="#">产品一</a></li>
    	<li><a href="#">产品一</a></li>
    	</ul>
    </li>
    <li><a href="#">服务介绍</a>
    	<ul>
    	<li><a href="#">服务二</a></li>
    	<li><a href="#">服务二</a></li>
    	<li><a href="#">服务二</a></li>
    	<li><a href="#">服务二服务二</a></li>
    	<li><a href="#">服务二服务二服务二</a></li>
    	<li><a href="#">服务二</a></li>
    	</ul>
    </li>
    <li><a href="#">成功案例</a>
    	<ul>
    	<li><a href="#">案例三</a></li>
    	<li><a href="#">案例</a></li>
    	<li><a href="#">案例三案例三</a></li>
    	<li><a href="#">案例三案例三案例三</a></li>
    	</ul>
    </li>
    <li><a href="#">关于我们</a>
    	<ul>
    	<li><a href="#">我们四</a></li>
    	<li><a href="#">我们四</a></li>
    	<li><a href="#">我们四</a></li>
    	<li><a href="#">我们四111</a></li>
    	</ul>
    </li>
    
    <li><a href="#">在线演示</a>
    	<ul>
    	<li><a href="#">演示</a></li>
    	<li><a href="#">演示</a></li>
    	<li><a href="#">演示</a></li>
    	<li><a href="#">演示演示演示</a></li>
    	<li><a href="#">演示演示演示</a></li>
    	<li><a href="#">演示演示</a></li>
    	<li><a href="#">演示演示演示</a></li>
    	<li><a href="#">演示演示演示演示演示</a></li>
    	</ul>
    </li>
    <li><a href="#">联系我们</a>
    	<ul>
    	<li><a href="#">联系联系联系联系联系</a></li>
    	<li><a href="#">联系联系联系</a></li>
    	<li><a href="#">联系</a></li>
    	<li><a href="#">联系联系</a></li>
    	<li><a href="#">联系联系</a></li>
    	<li><a href="#">联系联系联系</a></li>
    	<li><a href="#">联系联系联系</a></li>
    	</ul>
    </li>
    
    </ul>
    
    </body>
    </html>
    

      

    转载于:https://www.cnblogs.com/zxm1002/p/4840763.html

    展开全文
  • 本文实例讲述了JS实现支持多选的遍历下拉列表。分享给大家供大家参考。具体如下: 这里使用js实现可进行多项选择的下拉列表,鼠标点击上边下拉列表中的任意值,下边列表中就会显示该选中值,按住键盘上的Ctrl键,...
  • 第一种:分级的下拉列表,可对下拉列表中的各个列表值分类,不明白意思的,复制代码运行一下代码你就明白了。运行后可看到,下拉列表中的值是有分类名称的,当下拉值较多的时候,可避免灵乱。 <!DOCTYPE html ...
    第一种:分级的下拉列表,可对下拉列表中的各个列表值分类,不明白意思的,复制代码运行一下代码你就明白了。运行后可看到,下拉列表中的值是有分类名称的,当下拉值较多的时候,可避免灵乱。
    
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>分级下拉列表</title>
    </head>
    <body style="font-size:12px">
    <form id="form1" name="form1" method="post" action="">
      <table width="206" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td height="25">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;图书分类</td>
        </tr>
        <tr>
          <td height="28" align="center"><select name="book_class" id="book_class">
    	      <optgroup label="Web设计">
              <option>网站建设</option>
              <option>网页设计</option>	
              <option>JavaScript程序设计</option>
    		  </optgroup>	
    		  <optgroup label="软件世界">
              <option>软件工程</option>
              <option>软件应用</option>
    		  </optgroup>
            </select></td>
        </tr>
      </table>
    </form>
    </body>
    </html>
    
    
    第二种:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>在下拉列表中显示的多级树形菜单</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <script type="text/javascript"> 
    var data =new Array(); 
    data[0]= {id:'0',pid:'1',text:'河北'}; 
    data[1]= {id:'1',pid:'-1',text:'中国'}; 
    data[2]= {id:'2',pid:'6',text:'莫斯科'}; 
    data[3]= {id:'3',pid:'0',text:'河南'}; 
    data[4]= {id:'4',pid:'0',text:'北京'}; 
    data[5]= {id:'5',pid:'3',text:'湖南'}; 
    data[6]= {id:'6',pid:'-1',text:'俄罗斯'}; 
    function TreeSelector(item,data,rootId){ 
    this._data = data; 
    this._item = item; 
    this._rootId = rootId; 
    } 
    TreeSelector.prototype.createTree = function(){ 
    var len =this._data.length; 
    for( var i= 0;i<len;i++){ 
    if ( this._data[i].pid == this._rootId){ 
    this._item.options.add(new Option(".."+this._data[i].text,this._data[i].id)); 
    for(var j=0;j<len;j++){ 
    this.createSubOption(len,this._data[i],this._data[j]); 
    } 
    } 
    } 
    } 
    TreeSelector.prototype.createSubOption = function(len,current,next){ 
    var blank = ".."; 
    if ( next.pid == current.id){ 
    intLevel =0; 
    var intlvl =this.getLevel(this._data,this._rootId,current); 
    for(a=0;a<intlvl;a++) 
    blank += ".."; 
    blank += "├-"; 
    this._item.options.add(new Option(blank + next.text,next.id)); 
    for(var j=0;j<len;j++){ 
    this.createSubOption(len,next,this._data[j]); 
    } 
    } 
    } 
    TreeSelector.prototype.getLevel = function(datasources,topId,currentitem){ 
    var pid =currentitem.pid; 
    if( pid !=topId) 
    { 
    for(var i =0 ;i<datasources.length;i++) 
    { 
    if( datasources[i].id == pid) 
    { 
    intLevel ++; 
    this.getLevel(datasources,topId,datasources[i]); 
    } 
    } 
    } 
    return intLevel; 
    } 
    </script> 
    </head>
    <body>
    <select id="myselect"></select> 
    <script language=javascript type="text/javascript"> 
    var ts = new TreeSelector(document.getElementById("myselect"),data,-1); 
    ts.createTree(); 
    </script> 
    </body>
    </html>
    

     

    展开全文
  • html5手机列表页面滑动下拉刷新数据代码 html5手机列表页面滑动下拉刷新数据代码
  • html"] #d1{ width:400; height:250; background-color:#cccccc; left:30; top:40; position:absolute; } #d1_head{ height:30; font-size:20.....

    <html>
    <head>
    <style>
    #d1{
    width:400;
    height:250;
    background-color:#cccccc;
    left:30;
    top:40;
    position:absolute;
    }
    #d1_head{
    height:30;
    font-size:20pt;
    background-color:blue;
    color:white;
    }
    #d1_body{
    padding-left:40;
    padding-top:40;
    }
    </style>
    <script>
    var arr = new Array;
    arr[0] = [new Option('---方向---','-1')];
    arr[1] = [new Option('专业英语','zyen'),
    new Option('商务英语','swen')];
    arr[2] = [new Option('图形计算','txcp'),
    new Option('计算机应用','jscp'),
    new Option('软件工程','rjcp')];
    function change(index){
    var obj = document.getElementById('s2');
    obj.options.length = arr[index].length;
    for(i=0;i<arr[index].length;i++){
    obj.options[i] = arr[index][i];
    }
    }
    </script>
    </head>
    <body>
    <div id="d1">
    <div id="d1_head">关联下拉列表</div>

    <div id="d1_body">
    <form>
    <select name="s1" id="s1" onchange="change(this.selectedIndex);">
    <option value="-1">---专业---</option>
    <option value="english">英语</option>
    <option value="computer">计算机</option>
    </select>

    <select name="s2" id="s2">
    <option value="-1">---方向---</option>
    </select>
    <input type="submit" value="confirm"/>
    </form>
    </div>
    </div>
    </body>

    </html>
    展开全文
  • jquery实现输入框点击出现下拉列表树插件代码,jquery实现输入框点击出现下拉列表树插件代码html
  • 下拉列表 简单代码

    2015-12-19 16:15:00
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>下拉列表  简单</title>
    <style type="text/css">
    .xianshi {
        position: absolute;
        left: 0px;
        top: 160px;
        width: 213px;
        height: 44px;
        z-index: 2;
        line-height: 5px;
        border: solid 2px #0066FF;
        overflow:visible;
    }
    .yincang {
        position: absolute;
        left: 0px;
        top: 160px;
        width: 213px;
        height: 44px;
        z-index: 2;
        line-height: 5px;
        border: solid 2px #0066FF;
        overflow:hidden;
        
    }
    #apDiv8 {
        position: absolute;
        left: 213px;
        top: -2px;
        width: 270px;
        height: 355px;
        z-index: 3;
        border: solid 2px #0066FF;
        line-height: 25px;
        vertical-align: middle;
    }
    </style>
    </head>
    
    <body>
    <div id="apDiv1" align="center" class="yincang" οnmοuseοver="this.className='xianshi'" οnmοuseοut="this.className='yincang'"><h3>首页</h3>
       <div id="apDiv2">首页一</div>
       </div>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/zxm1002/p/5059307.html

    展开全文
  • 的样子,让用户每次从下拉框中选取一个,本文为大家分享了Android下拉列表spinner的具体实现代码,供大家参考,具体内容如下 mian.xml <LinearLayout xmlns:android=http://schemas.android.com/apk/res/android...
  • 本文实例讲述了jQuery三级下拉列表导航菜单。...为大家分享的jQuery三级下拉列表导航菜单代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQu
  • Html dom 是指在w3c规范出现之前,各个浏览器支持的一些dom操作。 1,Select对象。 属性 a,selectedIndex:用户选择的选项的下标,下标从0开始 b,length: 获取或者设置选项的... 我写的一个级联下拉列表代码如下: 代
  • 在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 HTML 自身的 select 下拉列表。然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何...
  • 分享一款基于jquery下拉列表树插件代码。这是一款实用的jquery 树形下拉框 下拉树代码下载。效果图如下: 在线预览源码下载 实现的代码html代码: <table width="100%" align="center" cellpadding="0...
  • 使用JS控制下拉列表左右选择 需求分析 在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品 技术分析 ...
  • 视图: cdnauto/views/config/index.php 复制代码 代码如下: echo CHtml::dropDownList(‘node’, ”, CHtml::listData(Node::model()->findAll(),’name’,’name’),array(’empty’=>’–请选择节点–‘, ‘id’ ...
  • 废话不多说,先给大家展示一下效果图,如果大家感觉不错,请参考实现代码。 效果图如下所示: 代码如下所示: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
  • 请大神根据页面情况,在下面的下拉列表处写段动态获取下拉列表代码,需要有js。网页使用guns框架生成的,可以百度获取guns框架源码,这里不允许上传文件。 ``` @layout("/common/_container.html"){ ...
  • html如何设置下拉列表

    2020-05-24 15:39:23
    一.html中的下拉列表介绍 可以用许多方法完成下拉列表的功能。介绍在htlm中下拉列表的实现,html下拉列表由select和option这两个表单标签一起使用来完成下拉功能的。 代码: <!DOCTYPE html> <html> ...
  • HTML下拉列表

    2017-06-13 19:20:00
    下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。如下代码: 讲解: 1、value: 2、selected="selected": 设置selected="selected"属性,则该选项就被默认选中。 在...
  • 闲的蛋疼,封装了个二级城市下拉 先保证html里有 <SPAN xss=removed><select id="province" size=1 > </select> <select id="city" style="width:60px"> </select> <input type="hidden...
  • 近日碰到一个问题,就是需要将用户点击下拉列表当中某个选项后,将其所选的内容保存起来,例如下面的HTML代码代码如下: <select onchange=”isSelected(this.value);” id=”city”> ”1″>北京</option> ...
  • 1、复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 代码如下: <form> 您爱好的运动是: <input type=”checkbox” name=”item” value=”football”/> ...
  • 1 //当一个 下拉列表 改变时,触发所有联动;(警告:各下拉列表之间 请不要出现 循环依赖) 2 //本函数,遵守如下规范:不使用任何内存数据(所有数据都是 即时使用,即时获取,数据实时),不初始化注册, 3 /...
  • 主要介绍了php数组生成html下拉列表的方法,涉及php根据数组动态创建html代码的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • html之文本域和下拉列表 文本域代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> 留言板: .../html>...下拉列表代码
  • 下面的代码输入的效果就是有三个下拉列表,分别是'year','month'和'day',单击下拉列表可以对日期进行选择:(自己写的,如果有更简单的,请同志们留言分享一下) &lt;html&gt;&lt;head&gt; &...
  • HTML中的下拉列表 select HTML中的下拉列表Html代码 <select> <option value ="1">Volvo</option> <option value ="2">Saab</option> ...
  • Html中的下拉列表Select

    千次阅读 2016-05-26 18:29:44
    HTML中的下拉列表 HTML中的下拉列表Html代码 select> option value ="1">Volvooption> option value ="2">Saaboption> option value="3">Opeloption> option value="4">Audioption> select>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,117
精华内容 446
关键字:

下拉列表代码html