可重用的二级级联JS
function Array2SelectList(srcObj,DefalutSelect,SourceArray,ParentValue)
{
var OptCount=0;
var isSelected =false;
SelectClear(srcObj);//Cleaer Options
//srcObj.disabled = true;
//alert(SourceArray.length );
for(var i = 0;i < SourceArray.length;i++){
if (SourceArray[i][2] == ParentValue || ParentValue ==null ){
//alert(SourceArray[i][2] + "-" + ParentValue );
OptCount++
//var opt=new Option();
//opt.value=SourceArray[i][0];
//opt.text =SourceArray[i][1];
srcObj.options[srcObj.length]=new Option(SourceArray[i][1],SourceArray[i][0]);
if (SourceArray[i][0] == DefalutSelect){
isSelected = true;
srcObj.options[srcObj.length-1].selected = true;
}
}
}
if (OptCount > 0){;
srcObj.options[0].text='';
if (isSelected!=true){srcObj.options[0].selected = true;}
//srcObj.disabled = false;
}
else{
srcObj.options[0].text='';
}
}
该JS引用后续跟进。
function Array2SelectList2(srcObj,DefalutSelect,SourceArray)
{
var OptCount=0;
var isSelected =false;
SelectClear(srcObj);//Cleaer Options
//srcObj.disabled = true;
//alert(SourceArray.length );
for(var i = 0;i < SourceArray.length;i++){
OptCount++
//var opt=new Option();
//opt.value=SourceArray[i][0];
//opt.text =SourceArray[i][1];
srcObj.options[srcObj.length]=new Option(SourceArray[i][1],SourceArray[i][0]);
if (SourceArray[i][0] == DefalutSelect){
isSelected = true;
srcObj.options[srcObj.length-1].selected = true;
}
}
if (OptCount > 0){;
srcObj.options[0].text='';
if (isSelected!=true){srcObj.options[0].selected = true;}
//srcObj.disabled = false;
}
else{
srcObj.options[0].text='';
}
}
function SelectClear(srcObj)
{//Cleaer Select box Options
if(srcObj.length>0){
for(var i= srcObj.length-1;i >= 0;i--)
{
srcObj.remove(i);
}
//var opt=new Option();
//opt.value='';
//opt.text ='';
srcObj.options[srcObj.length]=new Option('','');
//srcObj.disabled = true;
}
else{
var opt=new Option();
opt.value='';
opt.text ='';
srcObj.options[srcObj.length]=new Option('','');
}
}
function setOption(srcObj,intOptIndex,strOptValue,strOptText)
{//Change select box's Option
srcObj.options[intOptIndex].value=strOptValue;
srcObj.options[intOptIndex].text=strOptText;
}
function GetArray(ParaSrcPath,ParaSource,ParaArrayName,ParaParent){
/*Great Array*/
ParaSource.src=ParaSrcPath + '&ArrayName='+ ParaArrayName +'&ParentID='+ ParaParent + "&rnd="+Math.random();
}
分享到:
相关推荐
8. **模块化与封装**:为了代码的可维护性和重用性,插件通常会采用模块化设计,如使用ES6的`class`或CommonJS/AMD模块规范。同时,提供清晰的API供外部调用,如初始化、设置选项、获取选中值等。 9. **响应式设计*...
例如,第一级可能是一系列国家,选择一个国家后,第二级下拉框则会显示对应国家的城市。这样的设计能够节省屏幕空间,同时提供直观的导航体验。 在JavaScript中实现动态联级菜单,首先需要理解DOM(Document Object...
`Knockout.js`是一个轻量级的MVVM(Model-View-ViewModel)库,它提供了一种声明式的数据绑定方式,使开发者能够轻松地管理DOM元素与应用程序数据之间的交互。本文将详细介绍如何利用`Knockout.js`实现级联选择。 ...
Vue组件是可重用的代码块,它可以封装HTML、CSS和JavaScript,提供了一种组织和模块化应用的方式。在多级多选菜单组件中,我们将包含多个级别的菜单项,每个菜单项可能有子菜单项,同时支持全选和反选功能。 **数据...
7. **插件化开发**:为了提高代码的可重用性和维护性,可以将这个功能封装成一个jQuery插件。这需要遵循jQuery插件的开发规范,提供配置选项、初始化方法和必要的公共方法。 8. **响应式设计**:考虑不同屏幕尺寸和...
8. **CSS模块化**:CSS模块化工具如CSS Modules、CSS-in-JS和PostCSS帮助组织和重用代码,提高可维护性。 接下来,我们谈谈JavaScript在网页设计中的作用: 1. **DOM操作**:JavaScript通过Document Object Model...
12. **CSS-in-JS**:这是一种将CSS样式写入JavaScript文件的趋势,例如使用 Styled Components 或 JSS,可以结合React等库实现组件化的样式管理。 通过深入学习这些知识点,并结合提供的"CSS网页设计师.chm"手册和...
第二篇 使用MySQL 第8章 设计Web数据库 8.1 关系数据库的概念 8.1.1 表格 8.1.2 列 8.1.3 行 8.1.4 值 8.1.5 键 8.1.6 模式 8.1.7 关系 8.2 如何设计Web数据库 8.2.1 考虑要建模的实际对象 8.2.2 避免保存冗余数据 ...
第二篇 使用MySQL 第8章 设计Web数据库 8.1 关系数据库的概念 8.1.1 表格 8.1.2 列 8.1.3 行 8.1.4 值 8.1.5 键 8.1.6 模式 8.1.7 关系 8.2 如何设计Web数据库 8.2.1 考虑要建模的实际对象 8.2.2 避免...
第二篇 使用MySQL 第8章 设计Web数据库 8.1 关系数据库的概念 8.1.1 表格 8.1.2 列 8.1.3 行 8.1.4 值 8.1.5 键 8.1.6 模式 8.1.7 关系 8.2 如何设计Web数据库 8.2.1 考虑要建模的实际对象 8.2.2 避免...
- **级联值和参数:** 支持级联值和参数传递,方便组件间的通信。 - **数据绑定:** 支持双向数据绑定,简化了数据同步工作。 - **事件处理:** 通过事件处理机制来响应用户的交互行为。 - **生命周期:** 明确定义...
8. **CSS模块化**:CSS模块系统如CSS Modules或CSS-in-JS,帮助管理和重用样式,减少全局样式冲突。 9. **选择器性能**:高性能的选择器对页面渲染速度有直接影响。避免使用过于复杂的选择器,优先使用ID选择器和类...
... ...1. HTML结构:HTML文档由一系列元素组成,这些元素以开始标签...在掌握了这些基础知识后,您可以进一步探索更高级的主题,如响应式设计、CSS预处理器(如Sass和Less)以及JavaScript交互,以实现更复杂的网页效果。
另外,CSS预处理器如Sass(Syntactically Awesome Stylesheets)和Less可以让CSS编写更高效,它们支持变量、嵌套规则、混合、函数等特性,有助于代码组织和重用。如果"trekk-in-master"包含预处理器的代码,那么可能...