最近整理的一个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>
分享到:
相关推荐
JavaScript 实现二级联动是一种常见的前端交互技术,常用于创建动态的下拉菜单,例如在填写地址时选择省份和城市。这种技术的核心在于监听用户在第一个下拉框(通常是省份)中的选择变化,然后根据所选的省份更新第...
使用了微软MVC框架的创建和表的增、删、改、查、分页、基于JQuery的柱状图、JQuery的动态获取数据库的树形菜单、二级下拉菜单的联动、textarea文本框的左右移动、excel的导出等。 数据脚本在放在了DB文件包里面,在...
11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的...
11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的...
-增加中国的省市县三级联动示例(data/shengshixian.aspx)(feedback:Blues T)。 -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用...
- 描述:实现具有多级层次结构的下拉菜单。 - 实现方法:使用嵌套的HTML结构,并通过JavaScript处理菜单的展开和隐藏。 - **5.6 仿IE菜单的按钮。(效果如rongshuxa.com的导航栏目)** - 描述:模仿IE浏览器的...
- 通过 JavaScript 和 CSS 实现交互式的下拉菜单。 - **5.5 两层或多层次的下拉菜单** - 更加复杂的菜单结构,支持多级展开。 - **5.6 仿IE菜单的按钮** - 模仿 IE 浏览器菜单的设计风格。 - **5.7 状态栏,title...
-增加中国的省市县三级联动示例(data/shengshixian.aspx)(feedback:Blues T)。 -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用...
两个`select`之间的操作通常包括同步选择、联动更新等,这需要根据具体应用场景编写相应的函数来实现。 总之,JavaScript提供了丰富的API来处理`select`元素,使得我们可以灵活地控制下拉列表的行为,满足各种交互...
这种效果通常涉及下拉菜单和多级联动,通过JavaScript实现动态加载和联动选择,提高用户体验,使用户能快速找到所需区域。 2. **AJAX可以拖动的DIV块.htm**:AJAX(Asynchronous JavaScript and XML)是实现网页...
12.3.1 多级联动菜单 12.3.2 Ajax修改用户密码 12.3.3 自动保存的网络记事本 12.3.4 网页计算器 第13章 设计数据驱动模式 13.1 XML/JSON数据格式比较 13.2 容器类MixedCollection 13.3 数据存储基本单元...
Bootstrap智能表单支持多种常见的表单元素,包括输入框(text)、文本区域(textarea)、单选按钮(radio)、复选框(checkbox)、下拉菜单(select)以及日期选择器等。在基本配置中,开发者需要为每个元素设置...
2. **表单组件**:包括`textbox`、`passwordbox`、`textarea`、`combobox`、`datetimebox`等,用于收集用户输入。这些组件不仅有基本的输入功能,还支持验证、联动等高级特性。 3. **导航组件**:如`menu`、`tabs`...
12.3.1 多级联动菜单 12.3.2 Ajax修改用户密码 12.3.3 自动保存的网络记事本 12.3.4 网页计算器 第13章 设计数据驱动模式 13.1 XML/JSON数据格式比较 13.2 容器类MixedCollection 13.3 数据存储基本单元...
3. **二级省市级联菜单组件 AreaUtil**:用于显示省份和城市的下拉菜单,并实现联动效果。 4. **日期组件 Calendar**:提供日期选择功能。 5. **删除组件 Delete**:实现删除功能的组件。 6. **下载组件 ...
- **联动下拉框**:结合JavaScript或后端逻辑实现在用户选择某个下拉框选项后动态更新另一个下拉框的内容。 - **注意事项**:在使用这些组件时要注意验证和清理用户输入,防止安全漏洞和数据污染。 5. **接口函数...