论坛首页 Web前端技术论坛

2级联动下拉菜单+2级下拉菜单选中即填写textarea

浏览 5170 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-09-23  
最近整理的一个2级联动下拉菜单+2级下拉菜单选中即填写textarea的代码:

  function Link2_POption_Change(Arr, PSelect, SSelect)
	{
    if (typeof PSelect != 'object'){PSelect = document.getElementById(PSelect);}
    if (typeof SSelect != 'object'){SSelect = document.getElementById(SSelect);}

    var EnableTip=arguments[3]?arguments[3]:'N';

    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++;
        }
    }
}

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++;
            }
        }
    }

}
//用来填写textarea Pcontent
 function initContext(Arr,PSelect){
  	if (typeof PSelect != 'object'){PSelect = document.getElementById(PSelect);}
<%-- 	alert(PSelect);--%>
 	var val = PSelect.options[PSelect.selectedIndex].value;
<%-- 	alert('val'+ val);--%>
 	var j = 0;
 	for (j=0; j < Arr.length; j++){
        if(Arr[j][0]==val){
<%--    alert('arr'+Arr[j][1]);--%>
        	document.getElementById('Pcontent').value=Arr[j][1];
        }
    }
 }

在页面上执行下面的代码,我用的是struts2的标签,将后台2个List的值放入2个Array中,再执行上面的js对Array进行操作。
<script language = "JavaScript">
	var OptionArr = new Array();
	var OptionContextArr = new Array();
	var i = 0;
	<s:iterator value="templateList" id="template">
		OptionArr[i] = 
		new Array('<s:property  value="templatename"/>',
			'<s:property value="templateid"/>',
			'<s:property value="channel.channelid"/>');
		OptionContextArr[i] = 
		new Array('<s:property value="templateid"/>',
			'<s:property value="context.trim()"/>');
		i++;
	</s:iterator>
	<s:iterator value="channelList" id="channel">
		OptionArr[i] = 
		new Array('<s:property value="channelname"/>',
			'<s:property value="channelid"/>','0');
		i++;
	</s:iterator>
	Link2_PSOption_Init(OptionArr,'Pchannel','Ptemplate',
		'<s:property value="outCall.channel.channelid"/>',
		'<s:property value="template.templateid"/>',
                   'Y','--请选择--','Y','--请选择--');
</script>

下面是页面上2个select调用js的情况:
<tr>
<td align="left" >渠道方式:<td align="left" >
<select id="Pchannel" 
onchange="Link2_POption_Change
(OptionArr,'Pchannel','Ptemplate','Y','--请选择--')">
</select></td>
<td align="left" >渠道模板:<td align="left" >
<select id="Ptemplate" onchange="initContext(OptionContextArr,'Ptemplate')">
</select></td>
</tr>

<td colspan=3 valign=top><textarea id="Pcontent" style="border:1px solid #ccc;" cols=55 rows="7">
<s:property value="outCall.content"/>
</textarea></td>
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics