js 使用form表单select类实现级联菜单效果_基础知识

用例如下:

复制代码 代码如下:

<form name="form1" method="POST" action="--WEBBOT-SELF--">
<select id="select1" onchange="select1onchange()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>

我建议要设定每个option的value值,来标示用户在选用时具体是哪一项。
在javascript中使用document.getElementById("select1").value;或者form1.select1.value;
则可得到所选的值是多少。
使用onchange事件,触发条件是select的option值改变。

使用级联菜单时
建立两个select,他们的id分别是select1,select2。
为select1创建触发函数javascript函数,select1onchange(),在此函数中,得到select1的值,
查表得到相对应的select2的值,并为select2添加相应的选项,即可达到级联效果。

复制代码 代码如下:

<select id="select1" onchange="select1onchange()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="select2" onchange="select2onchange()">
</select>
function t1onfocus()
{
document.getElementById("p1").innerHTML="获得焦点";
}
function select1onchange()
{
var i;
for (i=10;i>=0;i--)
form1.select2.remove(i);
var objOption;
for (i=0;i<=9;i++)
{
objOption=document.createElement("OPTION");
objOption.text=form1.select1.value*10+i;
objOption.value=form1.select1.value*10+i;
form1.select2.options.add(objOption);
}
}
function select2onchange()
{
p1.innerHTML=form1.select2.value; //p1是文档中用于输出的自定义的项。
}

时间: 2024-07-30 05:55:42

js 使用form表单select类实现级联菜单效果_基础知识的相关文章

Ext JS 4官方文档之三 -- 类体系概述与实践_基础知识

Ext JS 4从底层对类体系进行了重构,这是Ext JS历史上的第一次对类体系的巨大重构.新的架构几乎被应用到每一个Ext JS 4的类中,所以希望您在开始编码前能对它有一定的了解,这是非常重要的. 这篇手册适用于任何想创建新类或者继承Ext JS 4中现存类的开发人员,分为4部分: 第一部分: "概述" -- 解释了创建一个强健的类体系的必要性 第二部分: "命名规范" -- 讨论了对类.方法.属性.变量和文件的最佳命名规范 第三部分: "实践&quo

ajax提交表单实现网页无刷新注册示例_基础知识

Ajax 无刷新 复制代码 代码如下: var xmlHttp;  uName() //用户名失去焦点时  {   if(all.uname.=="")   {    all.l1.innerHTML="不能为空!";    setTimeout("close(1)",1500);    return;   }   else   {    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"

javascript-关于JS读取form表单的问题,form中嵌套table,input标签放入table中

问题描述 关于JS读取form表单的问题,form中嵌套table,input标签放入table中 <html> <head></head> <body> <form id = "form1" name = "form1" action = "b.html" method = "post"> <table id = "tab" name =

JS组件Form表单验证神器BootstrapValidator_javascript技巧

本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <scr

js的form表单提交url传参数(包含+等特殊字符)的两种解决方法_javascript技巧

方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){ var formredwin = document.createElement("form"); formredwin.method = 'POST'; document.body.appendChild(formredwin); formredwin.action = "http://www.A.com/A.wiki?A=" +encodeURI(A) +

js提交form表单,并传递参数的实现方法_javascript技巧

//增加的函数 begin function queryFun(){ var type = $("#artType").val(); var hasInputed = "1";//表示输入了要搜索 的信息 if($("#query").val()=="选手姓名/编号"){ //表示没有输入要搜索的值 hasInputed="0"; } document.getElementById("queryF

js 提交form表单和设置form表单请求路径的实现方法_javascript技巧

如下所示: form表单ID:postform 设置表单请求url document.postform.action = "SaveReturnInfo"; 提交form表单 document.getElementById("postform").submit(); 以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了,希望大家多多支持~ 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内容,

js获取form表单所有数据的简单方法_javascript技巧

在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为公用方法直接调用.可以提高大家的开发效率. Js代码 <script type="text/javascript"> //获取指定form中的所有的<input>对象 function getElements(formId) { var form = documen

JS提交form表单实例分析_javascript技巧

本文实例讲述了JS提交form表单.分享给大家供大家参考,具体如下: 一.javascript 页面加裁时自动提交表单: Form表单: <form method="post" id="myform" action="a.php"> <input type="submit" value="提交表单"> </form> javascript 代码: <script t