0 0

JS实现,,多个下拉框,A下拉框选了的值,其他下拉框都不能有该值,详细见内容10

 

 

小弟的实现逻辑是:

 

页面加载的时候,addSLT()插入了各个下拉框的option,然后定义一个数组allSelected[],用来记录每个下拉框被选择的值,初始化为"0",同时定义一个数组,将下拉框的HTML内容都记录下来,当用户选择某个下拉框的时候,触发changeOption()函数,调用saveSelected函数,记录当前各个下拉框选择了的值,然后调用reloadSLT()函数,将下拉框全部初始化原始状态,最后执行delOption函数,根据allSelected[]的值,进行删除操作.

 

 

初步排错,是delOption()有问题,但是看代码的逻辑好像也没错,求指教!!!

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<title>框框</title>

<head>

</head>

<style type="text/css">

#mainDIV{

    vertical-align:middle;

    position:absolute;

    text-align:center;

    top:0px;

    width:100%;

    margin:0px auto;

    padding:0px;

}

 

#leftTD{

    width:30%;

}

#rightTD{

    width:70%;

}

table{

    width="100%";

    text-align:center;

    vertical-align:middle;

    border-collapse:collapse;

}

table td{

    padding:0;

}

#mainTBL{

    width:900px;

    border:1px solid black;

    margin:0;

    border-collapse:collapse;

}

#mainTBL td{

    margin:0px;

    padding:0px;

}

#rightTBL{

    border-left:1px solid black;

}

#left01{

    height:180px;

    border-bottom:1px solid black;

}

#left02{

    height:100px;

    border-bottom:1px solid black;

}

#left03{

    height:250px;

    border-bottom:1px solid black;

}

#left04{

    height:250px;

}

#right01{

    width:65%;

    height:250px;

    border-bottom:1px solid black;

}

#right02{

    width:35%;

    height:500px;

    border-left:1px solid black;

    border-bottom:1px solid black;

}

#right03{

    width:65%;

    height:250px;

    border-bottom:1px solid black;

}

#right04{

    height:100px;

    border-bottom:1px solid black;

}

#right05{

    height:180px;

}

#right06{

    height:180px;

    border-left:1px solid black;

}

</style>

 

<script type="text/javascript">

    function $(id){

        return document.getElementById(id);

    }

    var countOption=7;

    var countSlt=7;

    var i,j,k,p,q,x;

    var sltArry = new Array();

    sltArry[0]="slt01";

    sltArry[1]="slt02";

    sltArry[2]="slt03";

    sltArry[3]="slt04";

    sltArry[4]="slt05";

    sltArry[5]="slt06";

    sltArry[6]="slt07";

 

    var divArry = new Array();

    divArry[0]="div01";

    divArry[1]="div02";

    divArry[2]="div03";

    divArry[3]="div04";

    divArry[4]="div05";

    divArry[5]="div06";

    divArry[6]="div07";

 

    var allSelected = new Array(7);

    var optArry = new Array(7);

    var tmpOptArry = new Array(7);

 

    function changeOption(id){

saveSelected(id);

reloadSLT(id);

// alert("a");

delOption();

    }

 

    function delOption(){

for(i=0;i<7;i++){

   for(j=$(sltArry[i]).options.length-1;j>=0;j--){

       for(k=0;k<7;k++){

   if(allSelected[k]!=0){

if(i!=k){

                   $(sltArry[i]).options[j].outerHTML="";

}else{

   $(sltArry[i]).options[j].selected=true;

}

   }

}

   }

}

    }

 

    window.onload=function addSLT(){

        for(var i=0;i<7;i++){

            for(var k=1;k<8;k++){

   var varItem = new Option(k,k); 

       $(sltArry[i]).options.add(varItem);

   }

        }

for(i=0;i<7;i++){

$(sltArry[i]).options[i].selected=true;

}

 

for(i=0;i<7;i++){

   optArry[i]=$(sltArry[i]).outerHTML;

   //alert(optArry[i]);

   allSelected[i]="0";

}

    }

 

    function reloadSLT(id){

for(var i=0;i<7;i++){

       $(divArry[i]).innerHTML=optArry[i];

//alert($(sltArry[i]).outerHTML);

}

/*

for(i=0;i<7;i++){

   if(id==sltArry[i]){

if($(id).options[i].value==allSelected[i]){

   $(id).options[i].selected=true;

}

   }

}

*/

    }

 

    function saveSelected(id){

for(i=0;i<7;i++){

   if(id==sltArry[i]){

       allSelected[i]=$(id).options[$(id).selectedIndex].text;

   }

}

// for(i=0;i<7;i++){

//    alert(allSelected[i]);

// }

    }

</script>

<body>

<div id="mainDIV">

<table id="mainTBL">

    <tr>

        <td id='leftTD'>

            <table id="leftTBL">

                <tr><td id="left01">图片信息</td></tr>

                <tr><td id="left02">快速导航</td></tr>

                <tr><td id="left03">

   <div id="div01">

                    <select id="slt01" onchange="changeOption('slt01')">

                    </select>

   </div>

                    </td>

                </tr>

                <tr><td id="left04">

   <div id="div02">

                    <select id="slt02" onchange="changeOption('slt02')">

                    </select>

   </div>

                    </td>

                </tr>

            </table>

        </td>

        <td id="rightTD">

            <table id="rightTBL">

                <tr>

                    <td>

                        <table id="rightTOP">

                            <tr>

                                <td id="right01">

       <div id="div03">

                                        <select id="slt03" onchange="changeOption('slt03')">

                                        </select>

   </div>

                                </td>

                                <td id="right02" rowspan="2">

       <div id="div05">

                                        <select id="slt05" onchange="changeOption('slt05')">

                                        </select>

   </div>

                                </td>

                            </tr>

                            <tr>

                                <td id="right03">

       <div id="div04">

                                    <select id="slt04" onchange="changeOption('slt04')">

                                    </select>

   </div>

                                </td>

                            </tr>

                        </table>

                    </td>

                </tr>

                <tr>

                    <td><table id="rightMID"><tr><td id="right04">快速导航</td></tr></table></td>

                </tr>

                <tr>

                    <td>

                        <table id="rightBTM">

                            <tr>

                                <td id="right05">

       <div id="div06">

                                    <select id="slt06" onchange="changeOption('slt06')">

                                    </select>

   </div>

                                </td>

                                <td id="right06">

       <div id="div07">

                                    <select id="slt07" onchange="changeOption('slt07')">

                                    </select>

   </div>

                                </td>

                            </tr>

                        </table>

                    </td>

                </tr>

            </table>

        </td>

    </tr>

</table>

</div>

</body>

</html>

 

 

 

 

 

2012年6月01日 10:15

1个答案 按时间排序 按投票排序

0 0

咋不用一个类库呢,自己写搞得很繁琐。

比如用mootools,可以如下实现:
http://jsfiddle.net/foxgst/4fPqj/

2012年6月01日 14:23

相关推荐

    《CSS样式表行为手册》中文chm最新版本

    CSS样式表里重点讲述“行为”功能的一本CHM参考手册,很实用方便,内容也很丰富,收藏一下哦!

    1-中国各地区-固定资产投资-房地产开发投资情况(1999-2020年)-社科数据.zip

    中国各地区固定资产投资中的房地产开发投资数据集涵盖了1999至2020年的详细统计信息。该数据集包含了全国各城市地级市州的房地产开发投资情况,这些数据对于理解中国城市化进程、经济发展和房地产市场趋势至关重要。数据集中的指标包括年份、地区以及对应的房地产开发投资额(以亿元为单位),这些数据来源于中国区域统计年鉴及各省市统计年鉴。通过这些数据,研究者和决策者可以深入了解不同地区的经济动态,评估房地产市场的健康状况,并据此制定相应的政策和战略。这些数据不仅有助于宏观经济分析,还能为房地产开发商提供市场进入和扩张的决策支持。

    1-中国各地区数字经济发展对环境污染的影响数据(2011-2021年)-社科数据.zip

    中国各地区数字经济发展对环境污染的影响数据集(2011-2021年)提供了深入分析数字经济与环境污染关系的实证数据。该数据集涵盖了中国各地区在数字经济发展水平、环境污染物排放量、人口与经济指标、外资利用情况以及绿色专利指标等多个维度的数据。具体来说,数据集包括了行政区划代码、年份、所属省份等基本信息,以及数字经济水平熵值法、PM2.5均值、工业烟粉尘排放量、工业二氧化硫排放量、工业废水排放量等关键指标。此外,数据集还涉及了人口密度、人均地区生产总值、实际利用外资额占GDP之比、科学支出占比等经济和人口统计数据,以及绿色专利申请和授权总量等创新指标。这些数据不仅有助于研究者探讨数字经济对环境污染的直接影响,还能分析其潜在的中介机制和影响因素,为理解数字经济如何影响环境质量提供了宝贵的数据资源。

    1-中国各区县-工业行业企业数2004-2020年-社科数据.zip

    中国各区县工业行业企业数数据集覆盖了2004至2020年的时间跨度,提供了全国范围内区县级工业企业数量的详细统计。这些数据不仅能够反映中国工业企业的发展趋势和分布状况,而且对于研究工业行业的区域差异、发展质量和效益具有重要意义。数据集中包含了省份、地区、时间以及工业行业企业数目等关键指标,总计超过33000条数据记录。这些数据来源于各地方统计局,并经过整理,为研究者提供了一个宝贵的资源,以支持对中国经济特别是工业行业的深入分析和研究。

    BGM坏了吗111111

    BGM坏了吗111111

    毕业设计&课设_主要语言为 Java,含相关文件及配置.zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。

    Puppet 模块用于安装和管理 Python、pip、virtualenvs 和 Gunicorn 虚拟主机 .zip

    puppet-python The Puppet module is used to install and manage python, pip, virtualenvs, and Gunicorn virtual hosts. Please note that the module stankevich/python has been deprecated and is now available under Vox Pupuli: puppet/python. Usage For usage of classes, see Resources. If contributed, update to bundle exec rake strings:generate\[',,,,false,true'] hierarchical configuration. This module supports configuration through hiera. The following example creates two python3 virtual environments.

    WorldPO连接器标准尺寸及其选型指南,包含1.27mm、0.8mm、0.5mm间距的高速连接器

    WORLDPO(沃德披欧)是在政策支持下,成功做出对标进口品质和多达15个系列型号的连接器品牌,并且在专业机构的检测下,成功通过ISO 9001认证,FCC认证,CE认证。 内容概要:本文档为WorldPO连接器产品的选型手册,详细介绍了多种型号连接器的产品规格和参数, 包括标准的引脚间距(1.27mm、0.8mm、0.5mm、0.635mm等)、具体的引脚数量(如6-500针)、各式引脚样式(如贴片式、直插式等)、电镀方式(金镀层厚度不同)、 此外,还提供了配对合高高度、接触材料、电流负载能力、额定电流、不同型号的最大插拔次数和温度范围以及操作环境条件等多种关键属性说明。文中所有技术数据均有详细的图表辅助解读,方便用户快速查找所需参数。此外,还支持非标准定制服务。 使用场景及目标:帮助用户快速查找并选择适合自己应用需求的电连接器型号。例如,针对不同的信号传输要求,如高速数据传输、电力供应或是模拟信号传输,可以选择具有相应特性的连接器。 可以通过直接联系供应商来获取进一步的支持和服务建议。 其他说明:文档末尾提供联系人邮箱和电话,方便客户进行业务洽谈和技术支持查询。

    操作系统概述期末复习题(含解析)

    操作系统期末复习题

    毕业设计&课设_博客系统,含前后端技术,附搭建教程,曾获优秀毕业论文及展示页面截图.zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。

    个人原创STM32F1 BOOTLOADER,主控芯片为STM32F103VET6

    F103BL 是BOOTLOADER,需要通过仿真器进行写入; F103Usr 是一个用户程序编写实例; SW_BootLoader 是QT写的上位机,在BL的模式下通过串口和这个上位机将用户程序写入芯片; STM32的程序是利用uVision5.36编译 SW_BootLoader 是用QT5.15.2编译的

    线性调频LFM脉冲压缩雷达仿真 matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    数据科学领域的主流数据集类型及其应用分析

    内容概要:本文详细介绍了数据集中最常见的几种类型,包括结构化数据集(关系型数据库数据、时间序列数据、地理空间数据)、非结构化数据集(文本数据、图像数据、音频数据、视频数据)、半结构化数据集(JSON数据、XML数据)、流式数据集(传感器数据、社交媒体数据、网络日志数据)、多维数据集(数据仓库数据、数据立方体数据)和合成数据集(模拟数据、生成数据)。每种类型都具体描述了其特点、应用场景和优势。 适合人群:数据科学家、数据分析师、机器学习工程师和其他从事数据相关工作的专业人士。 使用场景及目标:帮助读者深入了解各种数据集的特点和应用场景,提升数据处理和分析能力,更好地利用数据集解决实际问题。 其他说明:随着大数据和人工智能技术的发展,数据集的种类、规模和复杂性不断增加,了解不同类型数据集的特点和应用场景对于提高算法性能和效果至关重要。

    中创建系统级简化参数化铰接式机器人模型 matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    使用python语言和Django框架创建的博客网站系统,下载即可运行,可做毕业设计

    使用python语言和Django框架创建的博客网站系统,下载即可运行,可做毕业设计。

    使用c++语言编程实现灰色预测模型的源代码

    灰色预测模型实现。本资源是使用c++语言编程实现灰色预测模型的源代码。模型为GM(1,1)。灰色预测模型是一种用于处理不确定性和不完全信息的预测方法,它通过分析系统内部因素之间的发展趋势,对原始数据进行生成处理,以寻找系统变动的规律,并建立微分方程模型来预测事物的未来发展趋势。灰色预测的核心是使用时间响应方程:x(k+1)=(x⑴-u/a)exp()+u/a,来根据初始值x(1)来计算x(k)(k=2,3,4....N,N+1),其中α称为发展灰数;μ称为内生控制灰数。可用二乘估计来计算得到。

    理光Ricoh 7502打印机驱动下载

    理光 Ricoh 7502 是一款高速黑白数码复印机。 【复印功能】 复印速度:75cpm 复印分辨率:600x600dpi 复印尺寸:最大 A3,305x432mm;最小 A6 SEF,100x140mm 预热时间:小于 30 秒 首页复印时间:小于 3.2 秒 连续复印页数:1-999 页 缩放范围:25-400%(以 1% 为单位) 【打印功能】 打印控制器:选配 打印速度:75ppm 打印分辨率:1200x1200dpi 打印语言:标准 PCL5e/PCL6 (XL),选购 Adobe PostScript3,XPS,Universal Driver 【扫描功能】 扫描控制器:选配 扫描速度:黑白 / 彩色单面 90ipm(200dpi),黑白 / 彩色双面 178ipm(200dpi) 扫描分辨率:100dpi,200dpi,300dpi,400dpi,600dpi 输出格式:单页 TIFF/JPEG,PDF,高压缩 PDF,加密 PDF,PDF/A;多页 TIFF,PDF,高压缩 PDF,加密 PDF,PDF/A

    最优化的顶帽和同态滤波器用于血管增强的matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    原生js随机图片拖拽排序代码.zip

    原生js随机图片拖拽排序代码.zip

    2022023721 蒋连成.pkt

    2022023721 蒋连成.pkt

Global site tag (gtag.js) - Google Analytics