4

私はプログラミングが初めてなので、これを行うためのより良い方法があれば、提案をいただければ幸いです。何時間も検索しましたが、リストの 3 番目の項目が最初の 2 項目に依存している解決策が見つかりません。

私の目標は、OS オプションを最初の 2 つの選択肢 (ネットワークとリソース) に依存させることです。内部ネットワークとファイアウォールの 2 つのネットワークがあり、必要に応じてサーバーをクラスター化することもできます。標準を選択すると、物理または仮想を選択できます。クラスターが選択されている場合、オプションは物理のみです。

問題が発生しているのは、OS の選択です。ファイアウォールと仮想の組み合わせを選択した場合、Linux と Windows のみが利用可能です。ファイアウォールと物理の組み合わせを選択した場合、AIX、Solaris、Windows、および Linux が許可されます。リソースをクリックして物理に変更すると、OS の選択が変更されます。

HTML コード 

<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="SelectSubCat();" >       
<Option value="">Select Internal or Firewall</option>
</SELECT>
<br>
<br>
<label>Resource</label>
<SELECT class= "formSelect" id="resource" NAME="resource">
<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>

Javascript コード

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 SelectSubCat(){
// 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");
}

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

1 に答える 1

2

OS オプションを作成するコードの部分を別の関数に移動します。元の関数の最後で呼び出します。リソースの変更時に新しい関数を呼び出します。

お気に入り：

function selectResource(){
  ...
  selectOS();

}
function selectOS()...

http://jsfiddle.net/7ey8E/1/

于 2012-11-16T18:51:27.843 に答える