JavaScript实现二级联动下拉框

原创 2007年10月02日 13:05:00

 自己写的一个二级联动下拉框,有什么不足,请指正。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<strong>二级联动下拉框、二级联动下拉菜单、二级联动下拉列表:</strong><br /><br />




<script language = "JavaScript">...
/**//*
 * 函数:Link2_POption_Change(Arr, PSelect, SSelect)
 * 说明:一级下拉框改变时初始化二级下拉框的选项
 * 作者:lg970044
 * 输入:
 * @参数 {Array}Arr                    选项信息数组
 * @参数 {String || Object}PSelect    一级下拉框的ID或对象
 * @参数 {String || Object}SSelect    二级下拉框的ID或对象
 * #参数 {String}EnableTip            是否加上提示项
 * #参数 {String}TipName                提示项名称
 * 输出:
 * 无
 
*/

function Link2_POption_Change(Arr, PSelect, SSelect)
...{
    
if (typeof PSelect != 'object')...{PSelect = document.getElementById(PSelect);}
    
if (typeof SSelect != 'object')...{SSelect = document.getElementById(SSelect);}
    
    
//默认参数EnableTip(是否加上提示项)设为否
    var EnableTip=arguments[3]?arguments[3]:'N';
    
//默认参数TipName(提示项名称)设为'请选择'
    var TipName=arguments[4]?arguments[4]:'请选择';
    
    
var i=0,j=0;
    
    
//清空二级下拉框选项
    SSelect.length = 0;
    
if (EnableTip=='Y')...{
        
//二级下拉框添加提示项
        SSelect.options[i] = new Option(TipName, '');
        i
++;
    }

    
//取得一级下拉框选择的值
    var PSelectValue=PSelect.options[PSelect.selectedIndex].value;
    
//为二级下拉框添加选项
    for (j=0; j < Arr.length; j++)...{
        
if (Arr[j][2== PSelectValue)...{
            SSelect.options[i] 
= new Option(Arr[j][0], Arr[j][1]);
            i
++;
        }

    }


}



/**//*
 * 函数:Link2_PSOption_Init(Arr, PSelect, SSelect)
 * 说明:初始化二级联动下拉框的选项
 * 输入:
 * @参数 {Array}Arr                    选项信息数组
 * @参数 {String || Object}PSelect    一级下拉框的ID或对象
 * @参数 {String || Object}SSelect    二级下拉框的ID或对象
 * #参数 {Number}PSelectValue        一级下拉框的预设值
 * #参数 {Number}SSelectValue        二级下拉框的预设值
 * #参数 {String}PEnableTip            一级下拉框是否加上提示项
 * #参数 {String}PTipName            一级下拉框提示项名称
 * #参数 {String}SEnableTip            二级下拉框是否加上提示项
 * #参数 {String}STipName            二级下拉框提示项名称
 * 输出:
 * 无
 
*/

function Link2_PSOption_Init(Arr, PSelect, SSelect)
...{
    
if (typeof PSelect != 'object')...{PSelect = document.getElementById(PSelect);}
    
if (typeof SSelect != 'object')...{SSelect = document.getElementById(SSelect);}
    
    
//默认参数PSelectValue(一级下拉框的预设值)设为0
    var PSelectValue=arguments[3]?arguments[3]:0;
    
//默认参数SSelectValue(二级下拉框的预设值)设为0
    var SSelectValue=arguments[4]?arguments[4]:0;
    
//默认参数PEnableTip(一级下拉框是否加上提示项)设为否
    var PEnableTip=arguments[5]?arguments[5]:'N';
    
//默认参数PTipName(一级下拉框提示项名称)设为'请选择'
    var PTipName=arguments[6]?arguments[6]:'请选择';
    
//默认参数SEnableTip(二级下拉框是否加上提示项)设为否
    var SEnableTip=arguments[7]?arguments[7]:'N';
    
//默认参数STipName(二级下拉框提示项名称)设为'请选择'
    var STipName=arguments[8]?arguments[8]:'请选择';

    
var i=0,ii=0,j=0;

    
if (SSelectValue>0)...{
        
//根据二级下拉框的预设值,计算出一级下拉框的值
        for (i=0;i < Arr.length; i++)...{
            
if (Arr[i][2> 0 && Arr[i][1== SSelectValue) PSelectValue=Arr[i][2];
        }

    }

    
    
//初始化下拉框选项
    i=0;
    ii
=0;
    
//清空一级下拉框选项
    PSelect.length = 0;
    
if (PEnableTip=='Y')...{
        
//一级下拉框添加提示项
        PSelect.options[i] = new Option(PTipName, '');
        i
++;
    }

    
//清空二级下拉框选项
    SSelect.length = 0;
    
if (SEnableTip=='Y')...{
        
//二级下拉框添加提示项
        SSelect.options[ii] = new Option(STipName, '');
        ii
++;
    }

    
//为一级下拉框添加选项
    for (j=0; j < Arr.length; j++)...{
        
if (Arr[j][2== 0)...{
            PSelect.options[i] 
= new Option(Arr[j][0], Arr[j][1]);
            
if (Arr[j][1== PSelectValue)...{
                PSelect.options[i].selected
=true;
            }

            i
++;
        }

    }

    
//取得一级下拉框的值
    if (PSelectValue == 0) PSelectValue = PSelect.options[0].value;
    
//为二级下拉框添加选项
    if (PSelectValue > 0)...{
        
for (j=0; j < Arr.length; j++)...{
            
if (Arr[j][2== PSelectValue)...{
                SSelect.options[ii] 
= new Option(Arr[j][0], Arr[j][1]);
                
if (Arr[j][1== SSelectValue)...{
                    SSelect.options[ii].selected
=true;
                }

                ii
++;
            }

        }

    }


}

</script>








<script language="javascript">...
var OptionArr = new Array();
//OptionArr[序号] = new Array('名称','值','上级关联值');
OptionArr[0= new Array('图书类','1','0');
OptionArr[
1= new Array('小说','1','1');
OptionArr[
2= new Array('文学','2','1');
OptionArr[
3= new Array('传记','3','1');

OptionArr[
4= new Array('音乐类','2','0');
OptionArr[
5= new Array('古典','4','2');

OptionArr[
6= new Array('影视类','3','0');
OptionArr[
7= new Array('电视剧','5','3');
OptionArr[
8= new Array('电影','6','3');

OptionArr[
9= new Array('百货类','4','0');
OptionArr[
10= new Array('家居','7','4');
OptionArr[
11= new Array('化妆品','8','4');
</script>

示例1:
<select id="class1id" onChange="Link2_POption_Change(OptionArr,'class1id','class2id');">
</select>
<select id="class2id">
</select>
<script language = "JavaScript">...
Link2_PSOption_Init(OptionArr,
'class1id','class2id');
</script>
<br /><br />


示例2:
<select id="class11id" onChange="Link2_POption_Change(OptionArr,'class11id','class22id','Y','请选择小类');">
</select>
<select id="class22id">
</select>
<script language = "JavaScript">...
Link2_PSOption_Init(OptionArr,
'class11id','class22id',0,3,'Y','请选择大类','Y','请选择小类');
</script>

详细内容见:http://www.qlolo.com/?m=pc&a=page_fh_diary&target_c_diary_id=874

利用ajax实现二级联动下拉框

下拉框二级联动,用ajax来实现是已经非常成熟的技术了。但对于我这个java菜鸟来说,真的是费了九牛二虎之力,各种百度,各种测试。终于得以实现。代码相对于网上的容易理解些。现把代码和我在编写的过程中遇...
  • qq_35778289
  • qq_35778289
  • 2016年08月04日 15:19
  • 724

jQuery实现二级联动下拉框

jsp页面: 技术方向* ${techDirec} ...
  • tianguobing
  • tianguobing
  • 2016年12月01日 09:34
  • 2143

AJAX解析json之 下拉框 二级联动

这个例子是实现省、市二级联动,当选择某一省时,改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析json文件得到的数据传回到jsp页面,其中省市均是从数据库取到的值: jsp页面: ...
  • u011955534
  • u011955534
  • 2013年11月14日 11:14
  • 3981

js实现的下拉框二级联动效果

主要介绍了js实现的下拉框二级联动效果,涉及JavaScript针对页面元素的遍历与节点操作相关技巧,需要的朋友可以参考下。 ...
  • Dove_Knowledge
  • Dove_Knowledge
  • 2017年04月30日 12:06
  • 1508

【新生入学】--JS省市二级联动下拉框

能会出现不规范的现象,我们做统计的时候很不方便,所以设计成下拉框选择的形式,这样存进数据库中的数据就都是规范的了。 籍贯的选择涉及到我们全国的34个省市等,而且选择了每个省之后要相...
  • xdd19910505
  • xdd19910505
  • 2014年12月31日 20:37
  • 3381

使用Ajax和Jquery配合数据库实现下拉框的二级联动

首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province:省份表 city :          城市表 如图: 然后再在java中建立相关的实体类与之对应 ...
  • Evan_QB
  • Evan_QB
  • 2017年07月19日 19:09
  • 10136

php+mysql+javascript实现二级联动下拉框

本例实现的内容是:一级下拉框是选择公司名的首字母,二级内容是首字母对应的所有公司。首先新建一个数据库名叫useradmin,创建两个数据表名叫com_charter 和company。com_cha...
  • qq1194684253
  • qq1194684253
  • 2017年11月01日 22:12
  • 117

javascript实现二级联动下拉框!

这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单。这里使用了javascript来联动第二级下拉框。Code highlighti...
  • apicescn
  • apicescn
  • 2007年01月23日 11:22
  • 3970

javascript实现二级联动下拉框

这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单。这里使用了javascript来联动第二级下拉框。 Code highli...
  • neubuffer
  • neubuffer
  • 2013年11月23日 14:31
  • 484

javascript实现二级联动下拉框

这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单。这里使用了javascript来联动第二级下拉框。 New Docume...
  • smh821025
  • smh821025
  • 2008年06月13日 19:52
  • 2926
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript实现二级联动下拉框
举报原因:
原因补充:

(最多只允许输入30个字)