堆栈内存溢出
  繁体   English   中英

Javascript子类别-清除选择

[英]Javascript Sub Categories - Clearing Selections

 原文  2012-11-28 20:50:31  3   2    javascript

问题描述

这是有关子类别的另一个问题。 当前的问题是，当我更改选项时，清除OS列表的功能不起作用，并且随着更改的进行而不断增长。 我尝试在所有地方添加删除功能，但仍然无法正常工作。 要重现此问题，请选择“内部网​​络”，然后查看“操作系统”列表。 选择“物理”作为资源，然后查看“操作系统”列表。 我在list.js文件中有一个名为removeAllOptions的函数，该函数在更改资源时不会清除OS选择。 更改网络后，它确实可以工作。 任何想法都非常感谢。

谢谢，雷

JS小提琴

index.php 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <script language="javascript" src="list.js"></script>
    </head>
    <head>
   <script language="javascript" src="list.js"></script>
</head>
<div class="left_box" />
<body onload="fillCategory();">
   <div id="formWrapper" />
   <FORM name="drop_list" action="availability.php" method="POST" />
   <fieldset>
      <label>Network</label>
      <SELECT class="formSelect" NAME="build" onChange="selectResource();">
         <Option value="">Select Internal or Firewall</option>
      </SELECT>
      <br />
      <br />
      <label>Resource</label>
      <SELECT class="formSelect" id="resource" NAME="resource" 
          onChange="selectOS(this);">
         <Option value="">Resource</option>
      </SELECT>
      <br />
      <br />
      <label>OS</label>
      <SELECT class="formSelect" id="OS" NAME="OS">
         <Option value="">OS</option>
      </SELECT>
      <br />
      <br />
   </fieldset>

list.js 

function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.drop_list.build, "Internal", "Internal", "");
addOption(document.drop_list.build, "Internal Cluster", "Internal Cluster", "");
addOption(document.drop_list.build, "Firewall", "Firewall", "");
addOption(document.drop_list.build, "Firewall Cluster", "Firewall Cluster", "");
}

function selectResource(){
// ON selection of category this function will work
removeAllOptions(document.drop_list.resource);
removeAllOptions(document.drop_list.OS);

if((document.drop_list.build.value == 'Internal')||(document.drop_list.build.value == 'Firewall')){
addOption(document.drop_list.resource,"Virtual", "Virtual","");
addOption(document.drop_list.resource,"Physical", "Physical","");
}

if((document.drop_list.build.value == 'Internal Cluster') || (document.drop_list.build.value     == 'Firewall Cluster')) {
addOption(document.drop_list.resource,"Physical", "Physical");
}
    selectOS();
}
function selectOS(el){

if(document.drop_list.build.value == 'Internal') {
addOption(document.drop_list.OS,"AIX 6.1", "AIX 6.1");
addOption(document.drop_list.OS,"Linux 5.0 (64-bit)", "Linux 5.0 (64-bit)");
addOption(document.drop_list.OS,"Linux 6.0 (64-bit)", "Linux 6.0 (64-bit)");
addOption(document.drop_list.OS,"Solaris 10", "Solaris 10");
addOption(document.drop_list.OS,"Windows 2008 (64-bit) Standard", "Windows 2008 (64-bit) Standard");
addOption(document.drop_list.OS,"Windows 2008 (64-bit) Enterprise", "Windows 2008 (64-bit)   Enterprise");
addOption(document.drop_list.OS,"Windows 2008 R2 (64-bit) Standard", "Windows 2008 R2 (64-bit)  Standard");
addOption(document.drop_list.OS,"Windows 2008 R2 (64-bit) Enterprise", "Windows 2008 R2 (64-bit) Enterprise");
addOption(document.drop_list.OS,"Special", "Special");
}

if((document.drop_list.build.value == 'Internal Cluster') ||(document.drop_list.build.value == 'Firewall Cluster')){
addOption(document.drop_list.OS,"AIX 6.1", "AIX 6.1");
addOption(document.drop_list.OS,"Linux 5.0 (64-bit)", "Linux 5.0 (64-bit)");
addOption(document.drop_list.OS,"Linux 6.0 (64-bit)", "Linux 6.0 (64-bit)");
addOption(document.drop_list.OS,"Solaris 10", "Solaris 10");
addOption(document.drop_list.OS,"Windows 2008 (64-bit) Enterprise", "Windows 2008 (64-bit) Enterprise");
addOption(document.drop_list.OS,"Windows 2008 R2 (64-bit) Enterprise", "Windows 2008 R2 (64-bit) Enterprise");
}

if((document.drop_list.build.value == 'Firewall') && (document.drop_list.resource.value == 'Virtual')) {
addOption(document.drop_list.OS,"Linux 5.0 (64-bit)", "Linux 5.0 (64-bit)");
addOption(document.drop_list.OS,"Linux 6.0 (64-bit)", "Linux 6.0 (64-bit)");
addOption(document.drop_list.OS,"Windows 2008 (64-bit) Enterprise", "Windows 2008 (64-bit) Enterprise");
addOption(document.drop_list.OS,"Windows 2008 R2 (64-bit) Enterprise", "Windows 2008 R2 (64-bit) Enterprise");
}

if((document.drop_list.build.value == 'Firewall') && (document.drop_list.resource.value == 'Physical')) {
addOption(document.drop_list.OS,"AIX 6.1", "AIX 6.1");
addOption(document.drop_list.OS,"Linux 5.0 (64-bit)", "Linux 5.0 (64-bit)");
addOption(document.drop_list.OS,"Linux 6.0 (64-bit)", "Linux 6.0 (64-bit)");
addOption(document.drop_list.OS,"Solaris 10", "Solaris 10");
addOption(document.drop_list.OS,"Windows 2008 (64-bit) Enterprise", "Windows 2008 (64-bit) Enterprise");
addOption(document.drop_list.OS,"Windows 2008 R2 (64-bit) Enterprise", "Windows 2008 R2 (64-bit) Enterprise");
}

} 

function removeAllOptions(selectbox)
{
    var i;
    for(i=selectbox.options.length-1;i>=0;i--)
{
    //selectbox.options.remove(i);
    selectbox.remove(i);
}
} 


function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
}

2 个解决方案

解决方案1
 1 已采纳  2012-11-28 21:21:20

对于快速修复，您可以在调用函数时调用removeAllOptions()函数。

但是您有太多重复的代码，并且每次调用选择框时都尝试访问DOM 。

更好地缓存它们。

码 

var networkList = '';
var resourceList = '';
var osList = '';

function fillCategory() {
    // this function is used to fill the category list on load
    networkList = document.drop_list.build;
    resourceList = document.drop_list.resource;
    osList = document.drop_list.OS;
    var catOptions = ["Internal", "Internal Cluster"
                      , "Firewall", "Firewall Cluster"];
    addOptions(networkList, catOptions);
}

function selectResource() {
    // ON selection of category this function will work
    removeAllOptions(resourceList);
    removeAllOptions(osList);
    var networkValue = networkList.value;

    if ((networkValue == 'Internal') || (networkValue == 'Firewall')) {
        addOptions(resourceList, ["Virtual", "Physical"]);
    }
    else if ((networkValue == 'Internal Cluster') 
               || (networkValue == 'Firewall Cluster')) {
        addOptions(resourceList, ["Physical"]);
    }
    selectOS();
}

function selectOS(el) {
    var networkValue = networkList.value;
    var resourceValue = resourceList.value;

    var internalOS = ["AIX 6.1","Linux 5.0 (64-bit)","Linux 6.0 (64-bit)"
                      ,"Solaris 10","Windows 2008 (64-bit) Standard"
                      ,"Windows 2008 (64-bit) Enterprise"
                      , "Windows 2008 R2 (64-bit) Standard" 
                      ,"Windows 2008 R2 (64-bit) Enterprise"
                      , "Special"];
    var clusterOS = ["AIX 6.1","Linux 5.0 (64-bit)","Linux 6.0 (64-bit)",
                     "Solaris 10","Windows 2008 (64-bit) Enterprise"
                     ,"Windows 2008 R2 (64-bit) Enterprise" ];

    var firewallOS = ["Linux 5.0 (64-bit)","Linux 6.0 (64-bit)"
                       ,"Windows 2008 (64-bit) Enterprise"
                      ,"Windows 2008 R2 (64-bit) Enterprise" ];

    removeAllOptions(osList); // Clear your OS list here
    if (networkValue == 'Internal') {
        addOptions(osList , internalOS);
    }
    else if ((networkValue == 'Internal Cluster') 
              || (networkValue == 'Firewall Cluster')) {
        addOptions(osList , clusterOS);
    }
    else if ((networkValue == 'Firewall') && (resourceValue == 'Virtual')) {
       addOptions(osList , firewallOS);
    }
    else if ((networkValue == 'Firewall') && (resourceValue == 'Physical')) {
        addOptions(osList , clusterOS);
    }

}

function removeAllOptions(selectbox) {
    var i;
    for (i = selectbox.options.length - 1; i >= 0; i--) {
        selectbox.remove(i);
    }
}

function addOptions(selectbox, arr) {
    // use an array to populate Select Options
    for (var i = 0; i < arr.length; i++) {
        var optn = document.createElement("OPTION");
        optn.text = arr[i];
        optn.value = arr[i];
        selectbox.options.add(optn);
    }
}​

这可以进行更多优化。.您也可以将jQuery用于此类目的。 最好将内联javascript移动到脚本本身。

工作小提琴

解决方案2
 0  2012-11-28 21:19:28

清除选择选项的代码，即removeAllOptions(document.drop_list.OS); 从函数selectResource 。 但是，您的resource onChange处理程序直接调用selectOS ，完全绕过了选项删除代码。

解决方案： 

function selectResource(){
    // ON selection of category this function will work
    removeAllOptions(document.drop_list.resource);

    if((document.drop_list.build.value == 'Internal')||(document.drop_list.build.value == 'Firewall')) {
        addOption(document.drop_list.resource,"Virtual", "Virtual","");
        addOption(document.drop_list.resource,"Physical", "Physical","");
    }

    if((document.drop_list.build.value == 'Internal Cluster') || (document.drop_list.build.value     == 'Firewall Cluster')) {
        addOption(document.drop_list.resource,"Physical", "Physical");
    }

    selectOS();
}

function selectOS(el) {

    removeAllOptions(document.drop_list.OS);

    if(document.drop_list.build.value == 'Internal') {
        addOption(document.drop_list.OS,"AIX 6.1", "AIX 6.1");
        addOption(document.drop_list.OS,"Linux 5.0 (64-bit)", "Linux 5.0 (64-bit)");
        addOption(document.drop_list.OS,"Linux 6.0 (64-bit)", "Linux 6.0 (64-bit)");
        addOption(document.drop_list.OS,"Solaris 10", "Solaris 10");
        addOption(document.drop_list.OS,"Windows 2008 (64-bit) Standard", "Windows 2008 (64-bit) Standard");
        addOption(document.drop_list.OS,"Windows 2008 (64-bit) Enterprise", "Windows 2008 (64-bit)   Enterprise");
        addOption(document.drop_list.OS,"Windows 2008 R2 (64-bit) Standard", "Windows 2008 R2 (64-bit)  Standard");
        addOption(document.drop_list.OS,"Windows 2008 R2 (64-bit) Enterprise", "Windows 2008 R2 (64-bit) Enterprise");
        addOption(document.drop_list.OS,"Special", "Special");
    }

    // the remaing code of this function

}

我所做的更改是移动removeAllOptions(document.drop_list.OS); 到selectOS内部。

建议：请使用jQuery之类的dom库。 我注意到您正在使用.value来检索选择框的选定值。 有报告的情况下，该代码不适用于某些版本的IE。 同样，所有浏览器中都有其他怪癖。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript子类别-3层 JS清算 <input type = “file”> 选 jQuery / js-清除按钮单击时的多选选择 如何通过javascript从父类别获取每个子类别？ jquery / javascript / unix绘图，x轴上的子类别 本机Javascript选择 选择和广播-JavaScript 在Angular 2 App中清除md-单选按钮选择 显示对SVG矩形的选择（JavaScript） javascript验证多个广播选择
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM