html下拉列表框的长度,HTML中如何定义下拉列表框的默认长度?

49213be5b5879cd23f60201cd50ad109.png

一共两个文件,html页面里面调用js文件就可以了,不是要把代码也复制到html文件里面^……

联动菜单 是这个意思吗?

实现方法很多 推荐一个比较好的:琥珀联动菜单

以下信息为琥珀联动菜单:(在此感谢作者!)

下面是静态页面:HPMenu_Demo.html

<html>

<head>

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

<title>琥珀网 - javascript无限级联动菜单</title>

<style type="text/css">

body, td

{

font-family: 宋体;

font-size: 12px;

}

</style>

<script language="javascript" src="hpmenu.js"></script>

</head>

<body>

<form name="form1" method="post" action="">

<table width="90%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">

<tr bgcolor="F1F1F1">

<td height="24" colspan="2" align="center">琥珀无限级联动菜单-JavaScript版 [HPMenu V1.0]</td>

</tr>

<tr bgcolor="#FFFFFF">

<td width="12%" height="24" align="center">所 在 洲:</td>

<td><select name="zhou" id="zhou" onChange="Menu(this.form,1);">

<option value="" selected>-----请选择-----</option>

<option value='欧洲'>欧洲</option>

<option value='亚洲'>亚洲</option>

<option value='非洲'>非洲</option>

<option value='大洋洲'>大洋洲</option>

<option value='北美洲'>北美洲</option>

<option value='南美洲'>南美洲</option>

</select></td>

</tr>

<tr bgcolor="#FFFFFF">

<td height="24" align="center">国  家:</td>

<td><select name="guo" id="select" onChange="Menu(this.form,2);">

<option value="" selected>-----请选择-----</option>

</select></td>

</tr>

<tr bgcolor="#FFFFFF">

<td height="24" align="center">城  市:</td>

<td><select name="shi" id="select2" onChange="Menu(this.form,3);">

<option value="" selected>-----请选择-----</option>

</select></td>

</tr>

<tr bgcolor="#FFFFFF">

<td height="24" align="center">地  区:</td>

<td><select name="qu" id="select3">

<option value="" selected>-----请选择-----</option>

</select></td>

</tr>

<tr bgcolor="F1F1F1">

<td height="24" colspan="2" align="center"> </td>

</tr>

</table>

<br>

<script language="javascript">

Menu(eval("document.form1"),1)

</script>

</form>

</body>

</html>

下面是调用的js :HPMenu.js

function  Menu(theform,menuid) {

/*---------------------------------------------------------------------------*\

*                     1.变量定义                       *

/*---------------------------------------------------------------------------*/

//定义菜单级别MenuClass,菜单长度数组MenuLenArr,菜单名称数组MenuArr,下级菜单数组SubMenuArr,菜单ID数组MenuIdArr

var MenuClass,MenuLenArr,MenuArr,SubMenuArr,MenuIdArr

//定义分隔符:splitchar1,splitchar2

var splitchar1,splitchar2

//定义临时数组,子数组,数组长度,

var arr,subarr,arrlen

/*---------------------------------------------------------------------------*\

*                     2.变量赋值                       *

/*---------------------------------------------------------------------------*/

MenuArr=new Array()

MenuLenArr=new Array()

SubMenuArr=new Array()

MenuIdArr=new Array()

MenuArr[1]="欧洲|||亚洲|||非洲|||大洋洲|||北美洲|||南美洲"                              //洲名|||...

MenuArr[2]="欧洲###德国|||欧洲###法国|||北美洲###美国|||北美洲###加拿大|||亚洲###中国"  //洲名###国名|||...

MenuArr[3]="中国###北京|||中国###上海|||美国###华盛顿|||美国###纽约|||德国###柏林"      //国名###城市名|||...

MenuArr[4]="北京###朝阳区|||上海###徐汇区|||广州###天河区|||纽约###曼哈顿区"      //国名###城市名|||...

MenuIdArr[1]="zhou"

MenuIdArr[2]="guo"

MenuIdArr[3]="shi"

MenuIdArr[4]="qu"

MenuClass=4  //4级菜单

splitchar1="|||";

splitchar2="###";

/*---------------------------------------------------------------------------*\

*                     3.生成数组                       *

/*---------------------------------------------------------------------------*/

for(iii=1;iii<=MenuClass;iii++)

{

arr=MenuArr[iii].split(splitchar1);

len=arr.length;

subarr=new Array()

for (i=0;i<len;i++)

{

subarr[i]=arr[i].split(splitchar2);

}

len=subarr.length;

SubMenuArr[iii]=subarr

MenuLenArr[iii]=len

}

//============更改下级菜单======================

var self,submenu,thislen,thisarr

//self本级菜单

//submenu子菜单

//theform:所在表单对象[type:object]

//menuid:本级菜单级别ID,如1级菜单则为1

self=eval("document."+theform.name+"."+MenuIdArr[menuid])

submenu=eval("document."+theform.name+"."+MenuIdArr[menuid+1])

thislen=MenuLenArr[menuid+1]

thisarr=SubMenuArr[menuid+1]

submenu.length=0

submenu.options.add(new Option( "-----请选择-----",""));

for  (i=0;i<thislen;i++)

{

if  (thisarr[i][0]  ==  self.value)

{

submenu.options.add(new Option(thisarr[i][1],  thisarr[i][1]));

}

}

submenu.options[0].selected=true

//============更改下级以下菜单==============

var kkk

for(kkk=menuid+2;kkk<=MenuClass;kkk++)

{

submenu=eval("document."+theform.name+"."+MenuIdArr[kkk])

submenu.length=0

submenu.options.add(new Option( "-----请选择-----",""));

submenu.options[0].selected=true

}

}

是直接用的!

◆◆

评论读取中....

请登录后再发表评论!

◆◆

修改失败,请稍后尝试

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/551260.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3蛋白wb_老司机手把手教你选WB内参

俗话说&#xff0c;一个生物学博士&#xff0c;要跑满1000面胶才能毕业。今天特邀实验室博三大师兄&#xff0c;和大家聊一聊WB内参那些小事。选择好合适并且好跑的内参&#xff0c;WB实验也就成功了一半。1. 什么是内参&#xff1f;内参即内部参照&#xff0c;一般是指由管家基…

制作支付页面弹框html,JS实现仿微信支付弹窗功能_蜡烛_前端开发者

先奉上效果图/p>body {margin: 0;padding: 0;font-size: 0.3rem;font-family: "微软雅黑", arial;}ul,li {margin: 0;padding: 0;list-style: none;}img {display: block;}#myBtn {display: block;width: 80%;height: auto;margin: 5rem auto;padding: 0.2rem;bor…

matlab 判断鼠标按下_轻巧可爱,支持多设备——雷柏Ralemo Air1乐萌鼠标

手机可以连接显示器&#xff0c;变成桌面系统&#xff0c;iPadOS支持鼠标操作&#xff0c;越来越多的智能设备都可以做到轻办公的使用需求&#xff0c;而办公必不可少就是鼠标&#xff0c;如果说为了每个设备都配个鼠标未免有点太过奢侈&#xff0c;今天介绍一款造型独特&#…

电子科学与技术与计算机专业,计算机科学与技术专业和电子科学与技术专业,哪个好些?...

作为计算机科学与技术专业的学生&#xff0c;这个必须怒答一波&#xff0c;其他学校我是不清楚&#xff0c;就我们学校&#xff0c;我们专业简直比电子科学与技术好太多。先说说培养方案吧计算机科学与技术:本专业培养具有良好的科学素养&#xff0c;系统掌握计算机科学与技术,…

kafka topic 一段时间不消费_全网最通俗易懂的 Kafka 入门

众所周知&#xff0c;消息队列的产品有好几种&#xff0c;这里我选择学习Kafka的原因&#xff0c;无他&#xff0c;公司在用。我司使用的是Kafka和自研的消息队列(Kafka和RocketMQ)改版&#xff0c;于是我就想学学Kafka这款消息队列啦。本篇文章对Kafka入门&#xff0c;希望对大…

cups源码下载 linux_【正点原子FPGA连载】第九章Linux显示设备的使用-领航者ZYNQ之linux开发指南...

1&#xff09;实验平台&#xff1a;正点原子领航者ZYNQ开发板2&#xff09;平台购买地址&#xff1a;https://item.taobao.com/item.htm?&id6061601087613&#xff09;全套实验源码手册视频下载地址&#xff1a;http://www.openedv.com/docs/boards/fpga/zdyz_linhanz.htm…

java程序启动后就进行了7次younggc_程序员如何优化 Java GC

本文由CrowHawk翻译Sangmin Lee发表在Cubrid上的”Become a Java GC Expert”系列文章的第三篇《How to Tune Java Garbage Collection》,本文的作者是韩国人&#xff0c;写在JDK 1.8发布之前&#xff0c;虽然有些地方有些许过时&#xff0c;但整体内容还是非常有价值的。译者此…

html标签名都是小写,到底啥是w3c标准(示例代码)

W3C标准从两年前接触前端的时候&#xff0c;听说了 w3c 标准 &#xff0c;是w3c(World Wide Web Consortium-世界万维网联盟)组织提出的web标准&#xff0c;印象中这个标准就是&#xff0c;行为(js)、样式(css)、结构(html)&#xff0c;相分离。。。仅此而已一直也就是这么以为…

自加一运算_C语言i++、++i混合运算老手未必全掌握,看了你就明白了

C语言中的自增自减运算符&#xff08;i、i--、i、--i&#xff09;对于新手来说&#xff0c;通常感到困惑&#xff0c;说来容易算来难&#xff0c;如果涉及到混合运算&#xff0c;更是无法理解。甚至有些学了几年的老手&#xff0c;未必全掌握&#xff08;也许你忽略了这个问题&…

计算机网络运输层的概述,计算机网络_运输层

运输层协议概述从通信和信息处理的角度看&#xff0c;运输层向它上面的应用层提供通信服务&#xff0c;它属于面向通信部分的最高层&#xff0c;同时也是用户功能中的最低层。当网络的边缘部分中的两个主机使用网络的核心部分的功能进行端到端的通信时&#xff0c;只有位于网络…

ble 连接成功后找不到服务_闷声发大财的BLE芯片龙头

来源&#xff1a;内容由半导体行业观察&#xff08;ID&#xff1a;icbank&#xff09;原创&#xff0c;作者&#xff1a;邱丽婷&#xff0c;谢谢。你有多久没使用过蓝牙功能了&#xff1f;随着Wi-Fi和快传软件的普及&#xff0c;蓝牙&#xff08;Bluethooth&#xff09;这一每部…

计算机管理关机在哪,电脑点了关机为什么却关不了

近期&#xff0c;一些网友留言说明明电脑已经按照正常步骤关机&#xff0c;但显示屏却关了&#xff0c;但是主机似乎还在运行&#xff0c;这时该怎么办&#xff1f;针对此疑问&#xff0c;下面小编和大家详细说明一下电脑点了关机却关不了的处理方法&#xff0c;感兴趣的用户一…

东北农业大学考研计算机大纲,东北农业大学(专业学位)计算机技术研究生考试科目和考研参考书目...

考研真题资料优惠价原价选择东北农业大学(专业学位)计算机技术教材&#xff0c;也叫东北农业大学(专业学位)计算机技术考研参考书、指定书目等等&#xff0c;是考验专业课复习过程中最重要的资料。考研是一种针对性很强的考试项目&#xff0c;参考书目由报考院校的研究生院制定…

matlab 功率谱密度 汉宁窗_[振动与测试 2] 什么是PSD(功率谱密度)

上接前章&#xff08;数字信号处理的基本概念&#xff09;&#xff0c;今天给大家介绍下振动测试中最常见的一个概念PSD&#xff0c;即所谓的功率谱密度&#xff08;Power Spectral Density&#xff09;,以及其与Autopower&#xff08;自功率谱&#xff09;的区别。自功率谱现在…

gsm模块网站服务器,gsm模块是什么_gsm模块工作原理_gsm模块的应用

描述gsm模块是什么GSM模块&#xff0c;是将GSM射频芯片、基带处理芯片、存储器、功放器件等集成在一块线路板上&#xff0c;具有独立的操作系统、GSM射频处理、基带处理并提供标准接口的功能模块。GSM模块具有发送SMS短信&#xff0c;语音通话&#xff0c;GPRS数据传输等基于GS…

df添加一行 python_Python为输出的数据绘制表格

在Python开发环境中&#xff0c;输出数据时没有表格、没有对齐&#xff0c;当数据较多的情况下看起来非常的凌乱&#xff0c;估计很多人像我一样为这个事情而烦恼。左图是我在PyCharm开发环境下输出的数据。下面我们通过Python的Texttable模块为数据添加表格框线&#xff0c;对…

echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍

什么是ECharts&#xff1f;ECharts&#xff0c;一个使用 JavaScript 实现的开源可视化库&#xff0c;可以流畅的运行在 PC 和移动设备上&#xff0c;兼容当前绝大部分浏览器(IE8/9/10/11&#xff0c;Chrome&#xff0c;Firefox&#xff0c;Safari等)&#xff0c;底层依赖轻量级…

计算机里的及格率和有优秀率怎么算,excel表格计算优秀及格率的教程

Excel中的优秀率具体该如何计算呢?下面是由学习啦小编分享的excel表格计算优秀及格率的教程&#xff0c;以供大家阅读和学习。excel表格计算优秀及格率的教程计算优秀及格率步骤1&#xff1a;打开EXCEL软件&#xff0c;使用手动创建一些基础数据&#xff0c;如图。完成该函数的…

concat合并的数组会有顺序么_超全的JS常用数组方法整理

前言常用数组方法汇总方法解析1&#xff1a;concat();2&#xff1a;join();3&#xff1a;pop();4&#xff1a;shift();5&#xff1a;unshift();7&#xff1a;reverse();8&#xff1a;sort();9&#xff1a;slice();10&#xff1a;splice();11&#xff1a;toString();12&#xff…

in ms sql 集合参数传递_mybatis从入门到精通,第三篇《动态SQL》,干货满满

动态 SQL 是 MyBatis 的强大特性之一。如果你使用过 JDBC 或其它类似的框架&#xff0c;你应该能理解根据不同条件拼接 SQL 语句有多痛苦&#xff0c;例如拼接时要确保不能忘记添加必要的空格&#xff0c;还要注意去掉列表最后一个列名的逗号。利用动态 SQL&#xff0c;可以彻底…