javascript - Javascript サブカテゴリ - 選択のクリア

Question

これは、サブカテゴリに関する追加の質問です。現在の問題は、オプションを変更すると、OS リストをクリアする機能が機能せず、変更が行われるにつれて拡張し続けることです。どこでも削除機能を追加しようとしましたが、まだ機能しません。問題を再現するには、ネットワークに内部を選択し、OS リストを確認します。リソースに物理を選択し、OS リストを確認します。リソースが変更されたときに OS の選択をクリアしない list.js ファイルに removeAllOptions という関数があります。ネットワークが変更されたときに機能します。どんなアイデアでも大歓迎です。

ありがとう、レイ

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);
}

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

}

removeAllOptions(document.drop_list.OS);私が行った変更は、 to を insideに移動することでしたselectOS。

提案: jQuery のような dom ライブラリを使用してください。.value選択ボックスの選択された値を取得するために使用していることに気付きました。特定のバージョンの IE でコードが機能しないという報告がありました。同様に、すべてのブラウザには他の癖があります。

javascript - Javascript サブカテゴリ - 選択のクリア

2 に答える 2

Related

Reference