javascript - Javascript 子类别 - 清除选择

Question

这是关于子类别的附加问题。当前的问题是，当我更改选项时，清除操作系统列表的功能不起作用，并且随着更改的进行而继续增长。我尝试在任何地方添加删除功能，但它仍然不起作用。要重新创建问题，请为网络选择内部，然后查看操作系统列表。选择物理资源，然后查看操作系统列表。我在 list.js 文件中有一个名为 removeAllOptions 的函数，它在资源更改时不会清除操作系统选择。当网络发生变化时，它确实有效。任何想法都非常感谢。

谢谢，雷

JS小提琴

索引.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>

列表.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);
}

score 1 · Accepted Answer

对于快速修复，您可以在调用该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 移动到脚本本身。

工作小提琴

score 0 · Accepted Answer

清除选择选项的代码，即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

}

我所做的更改是将 to 移到removeAllOptions(document.drop_list.OS);inside selectOS。

建议：请使用像 jQuery 这样的 dom 库。我注意到您正在使用.value检索选择框的选定值。有报道称代码无法在某些版本的 IE 上运行。同样，所有浏览器中都有其他怪癖。

javascript - Javascript 子类别 - 清除选择

2 回答 2

Related

Reference