onchange（）を使用して別の選択リストを表示する方法

Question

ここにいくつかの助けが必要です。ちょっと立ち往生したようだ。それを短く甘く保つために、私はいくつかのオプションを含む選択リストを持っています。ここで私の最終目標は、特定のオプションを選択すると、「モジュール」という別の選択リストを表示し、この選択リスト内に選択可能なオプションがいくつかあることです。リスト "ProductDet_Product"内で対象としているオプションは、以下に示すDocAve 6とDocAve 5です。

function loadmodule($i) { 
 
    if ($i = "DocAve 6") { 
 
    var x = document.createElement("SELECT"); 
 
    x.setAttribute("id", "loadDA6module"); 
 
    document.body.appendChild(x); 
 

 
    var z = document.createElement("option"); 
 
    z.setAttribute("value", "Administrator") 
 
    var t = document.createTextNode("Administrator"); 
 
    z.appendChild(t); 
 
    document.getElementById("loadDA6module").appendChild)(z); 
 
    } 
 
}

<td style="text-align: center; vertical-align: middle; width: 534px;"> 
 
    <p><small>Product 
 
     (Project): 
 

 
     <select id="ProductDet_Product" 
 
      onchange="loadmodule(document.getElementById(this).options[document.getElementById(this).selectedIndex].value);"> 
 

 
      <option>APIA</option> 
 
      <option>ARIS (Risk Intelligence System)</option> 
 
      <option>Citizens Services</option> 
 
      <option>Compliance Guardian</option> 
 
      <option>Compliance Guardian Online</option> 
 
      <option>Discovery Tool</option> 
 
      <option value="DocAve 6">DocAve 6</option> 
 
      <option value="DocAve 5">DocAve 5</option> 
 
      <option>File Share Navigator</option> 
 
      <option>File Share Navigator Online</option> 
 
      <option>Governance Automation</option> 
 
      <option>Governance Automation Online</option> 
 
      <option>Meetings</option> 
 
      <option>Meetings Online</option> 
 
      <option>Office Connect</option> 
 
      <option>Perimeter</option> 
 
      <option>Perimeter Online</option> 
 
      <option>PDF Aggregator</option> 
 
      <option>Salesforce Backup</option> 
 
      <option>Secure Publisher</option> 
 
      <option>Watermark</option> 
 
     </select> 
 
    </small> 
 
    </p> 
 
</td>

私はDocAveの5かのDocAve 6のいずれかを選択した場合、私は上記のようなオプションが含まれます。このリストの下に別の選択リストを表示したいと思います。

DocAve 6を選択すると、追加の選択リストが表示されません。もしあなたが気にしないなら、ここでいくつかの援助が大好きです！ありがとうございました！

Answer 1

あなたは、このようにそれを行うことができます：

• は、あなたのHTML内の別の選択リストを作成し、あなたのonchange()コールバックでnone

<select id="hiddenSelect">

• に、それはCSSのdisplayプロパティだ設定表示されているselectの場合は、選択した値== "DocAve 6"かどうかを確認し、そうであれば、 block

    <select id="ProductDet_Product" onchange="showHiddenSelect()"> 

    function showHiddenSelect() { 
    var result = document.getElementById('ProductDet_Product').value; 
    if (result=="DocAve 5") { 
    document.getElementById("hiddenSelect").style.display = "block"; 
    } 
    } 

Answer 2

に他のリストのAYプロパティは、あなたがそのような選択されたオプションを取得する必要はありません。単に引数としてonchangeにこれを渡して値を取得：

<select id="ProductDet_Product" onchange="loadmodule(this);"> 

その後、パラメータのロード・モジュールのチェック.valueに：

function loadmodule(activities) { 
    console.log(activities.value); 
    if(activities.value == "test") 
    { 
     addOtherSelect(); 
    }  
} 

あなたが作業例hereを見つけることができます。