问答首页 → Web前端技术
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>

 

 

 

 

 

JavaScriptHTMLCSS 
2012年6月01日 10:15

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

0 0

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

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

2012年6月01日 14:23

相关推荐

    下拉框值触发另一个下拉框

    在这个函数中，我们可以获取当前选中的值，并根据这个值来改变另一个下拉框的状态。如果值为空，我们可以设置另一个下拉框为不可选，即禁用状态： ```javascript var dropdown2 = document.getElementById('...

    随着下拉框的改变 下拉框的值也在同步变化

    js实现通过改变下拉框的值，输出相应的下拉框的value

    EXTJS 选下拉框，并取得下拉框的值

    在这个例子中，我们创建了一个包含三个选项的下拉框，每个选项都有一个`id`和对应的`text`。`displayField`设置为'text'，这意味着在下拉框中显示的是`text`字段的值；`valueField`设置为'id'，表示当用户选择一个...

    使用javascript实现下拉框的动态控制

    资源名称：使用Javaｓｃｒｉｐｔ实现下拉框的动态控制   内容简介： 使用Javaｓｃｒｉｐｔ实现下拉框的动态控制 一、前言 下拉框是常用的一种web页面控件。它很简单实用，便于 操作者从…组选项...

    JS实现下拉框多项选择

    本篇文章将详细讲解如何使用JavaScript（JS）来实现下拉框的多选功能。 首先，我们来看一下HTML的基础结构。一个基本的下拉框`&lt;select&gt;`元素默认只支持单选，如果想要实现多选，我们需要在`&lt;select&gt;`标签上添加`...

    JS多选下拉框_实现多项选择

    JS多选下拉框，实现多选。点击显示下拉。 &lt;script type="text/javascript"&gt; &lt;!-- function $(e){return document.getElementById(e) ;} $('btnSelect').onclick = function () { //§ó§ï?? $('status')....

    下拉框多选 js动态实现

    这个需求通常涉及到HTML、CSS和JavaScript技术的结合使用，特别是JavaScript库如jQuery或者其他自定义JS代码，来实现下拉框的多选功能。在这里，我们主要讨论如何使用div元素和JavaScript来模拟原生的下拉框多选效果...

    js实现下拉框选择要显示图片的方法

    这个值是下拉框选项中默认显示的图片路径。 4. 为`&lt;select&gt;`元素添加`onChange`事件处理器。当选择的选项发生改变时，该事件处理器会将`&lt;img&gt;`标签的`src`属性值更新为选中`&lt;option&gt;`的`value`值。 在上述步骤中，...

    一个简单的实现多选的下拉框

    本文将详细讲解如何实现这样一个简单的多选下拉框，并探讨其功能完善性和移植性。 首先，一个基本的下拉框在HTML中通常通过`&lt;select&gt;`标签来实现，但原生的HTML下拉框只支持单选，不支持多选。要实现多选，我们需要...

    JS实现多选项下拉框智能提示

    JS实现多选项下拉框智能提示，使用说明见js文件。适用于在html的select标签中选项较多的情况，支持拼音和五笔输入的智能提示。

    VC++中实现复选下拉框CCheckComboBox

    该资源在VS2008SP1 IDE中编写，主要介绍了如何在VC++中实现复选下拉框，其中包含了CheckComboBox.h和CheckComboBox.cpp两个文件，这两个文件实现了复选下拉框的功能。但作者Margin在使用复选下拉框时发现：在模态...

    js多选下拉框多选下拉框多选下拉框

    JavaScript（简称js）作为客户端脚本语言，常被用来增强网页的交互性，其中包括实现多选下拉框的功能。本文将深入探讨如何使用JavaScript来创建和操作多选下拉框。 首先，HTML基础是构建多选下拉框的起点。一个基本...

    jquery实现的多选下拉框

    此外，由于这个插件使用了CSS3的一些特性，可能在一些较旧的浏览器中表现不佳，开发者需要进行适当的降级处理，以确保在各种环境下都能良好运行。 总结来说，"ehynds-jquery-ui-multiselect-widget"是一个强大的...

    JavaScript 实现连动下拉框

    本文将详细介绍 JavaScript 实现连动下拉框的方法，包括确定数据格式、根据传入的数组创建选项列表、在设置选项之前清空原有选项、设置提示选择项和默认选择项等。 确定数据格式是实现连动下拉框的第一步。首先，...

    jsp实现连动下拉框

    连动下拉框通常用于需要根据一个选择器的选择结果动态改变另一个选择器内容的情况，例如在用户选择了一个国家后，自动更新城市列表等场景。 ### JSP 实现连动下拉框的核心知识点 #### 1. 理解 JSP 的基本概念 JSP...

    带复选框的下拉框

    复选框下拉框控件通常用于需要用户选择多个值的场景，例如在设置偏好、筛选条件或分配权限时。这种控件的设计思路是将传统的下拉列表扩展为一个多选列表，每个选项前都有一个复选框供用户选择。当用户点击下拉箭头时...

    用VBA实现Excel单元格下拉框复选demo

    在Excel中，下拉框通常通过数据验证（Data Validation）功能创建，它允许用户从预定义的选项列表中选择一个值。而复选框则属于控件（Controls）类别，用于提供多选或二进制选择功能。 **一、VBA基础** 在VBA中，...

    使用bootstrap实现多选下拉框

    在Bootstrap中实现多选下拉框可以极大提升用户体验，使得用户在有限的空间内可以选择多个选项。以下是如何使用Bootstrap来创建这样一个功能的详细步骤。 首先，确保你已经在你的项目中引入了Bootstrap的相关资源。...

    多个js实现的多选下拉框

    在网页设计中，多选下拉框是一种常见的用户交互元素，...总结，实现多个js实现的多选下拉框，需要理解HTML结构、JavaScript操作、事件处理以及可能用到的第三方库。同时，关注性能优化和无障碍性是提升用户体验的关键。

    不能选择重复的下拉框

    "不能选择重复的下拉框"这个话题是关于如何实现一个这样的功能，即用户在下拉框中选择一个选项后，该选项将被禁用，防止用户再次选择。这种功能常见于用户需要唯一选择的情况下，比如选择用户名、邮箱地址等。 首先...

Magicbox
Ask-but
我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

Global site tag (gtag.js) - Google Analytics