如果在前面的下拉菜單中進行了某些選擇，則顯示/隱藏下拉菜單

我有一個表單。我想根據單選按鈕來禁用或啓用一個下拉菜單。我需要在表格中多次執行此操作。我是Javascript新手，所以我不知道從哪裏開始。這是形式的一部分：如果在前面的下拉菜單中進行了某些選擇，則顯示/隱藏下拉菜單

<p id="hospitalorientation"><label>Hospital Orientation:</label> 
<div id='buttons'> 
<label><input type="radio" name="hospital" /> Not Complete </label> 
<label><input type="radio" name="hospital" /> Complete </label> 
</div> 
<div id="list1" style="display: none;"> 
<label>Month Complete: 
<select> 
    <option>January</option> 
    <option>February</option> 
    <option>March</option> 
    <option>April</option> 
    <option>May</option> 
    <option>June</option> 
    <option>July</option> 
    <option>August</option> 
    <option>September</option> 
    <option>October</option> 
    <option>November</option> 
    <option>December</option> 
</select> 
</label> 
</div>

，然後我在表格中的這一基本多個副本..

<p id="ppd"><label>PPD:</label> 
<div id='buttons'> 
<label><input type="radio" name="ppd" /> Not Complete </label> 
<label><input type="radio" name="ppd" /> Complete </label> 
</div> 
<div id="list2" style="display: none;"> 
    <label>Month Complete: 
    <select> 
     <option>January</option> 
     <option>February</option> 
     <option>March</option> 
     <option>April</option> 
     <option>May</option> 
    <option>June</option> 
    <option>July</option> 
    <option>August</option> 
    <option>September</option> 
    <option>October</option> 
    <option>November</option> 
    <option>December</option> 
</select>

現在我真的不知道哪裏去了從那裏。

來源

2011-07-27 Emily

爲什麼不從一個JavaScript框架開始，它可以讓你相對容易地做到這一點。 jQuery是最流行的JS框架之一：http://jquery.com/ –

你需要有值的單選框，並添加這些ID，如「rButtonOne」和「rButtonTwo」

<input type="radio" id="rButtonOne" onclick="clicked(this);" value="0"> 
<input type="radio" id="rButtonTwo" onclick="clicked(this);" value="1">

然後JavaScript的

function clicked(obj) 
{ 
    if(obj.value == "1") 
     document.getElementById('id_of_select_box').disabled = 'disabled'; 
    else if (obj.value == "0") 
     document.getElementById('id_of_select_box').disabled = ''; 
}

這就是方法。

來源

2011-07-27 17:04:54

這似乎並不奏效。我試過各種版本的JavaScript，但似乎沒有任何工作。 – Emily

的Html

<p id="hospitalorientation"><label>Hospital Orientation:</label> 
<div id='buttons'> 
<label><input id="radio1" type="radio" name="hospital" /> Not Complete </label> 
<label><input id="radio2" type="radio" name="hospital" /> Complete </label> 
</div> 
<div id="list1" style="display: none;"> 
<label>Month Complete: 
<select> 
    <option>January</option> 
    <option>February</option> 
    <option>March</option> 
    <option>April</option> 
    <option>May</option> 
    <option>June</option> 
    <option>July</option> 
    <option>August</option> 
    <option>September</option> 
    <option>October</option> 
    <option>November</option> 
    <option>December</option> 
</select> 
</label> 
</div>

的Javascript：

document.getElementById("radio1").onchange = function(){ 
    if(this.checked == true){ 
     document.getElementById("list1").style.visibility = "hidden"; 
     document.getElementById("list1").style.display = "none"; 
    } 
}; 

document.getElementById("radio2").onchange = function(){ 
    if(this.checked == true){ 
     document.getElementById("list1").style.visibility = "visible"; 
     document.getElementById("list1").style.display = "block"; 
    } 
};

工作實例：http://jsfiddle.net/aSxXA/

下面是一個更新，這是一個完整的HTML頁面，注意身體onload事件如何註冊事件處理，我認爲當您試圖在之前註冊文檔時，文檔可能尚未加載

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Untitled Document</title> 
     <script type=text/javascript> 
      function registerEventHandlers() 
      { 
      document.getElementById("radio1").onchange = function(){ 
       hideDiv(this,"list1") 
      }; 
      document.getElementById("radio2").onchange = function(){ 
       showDiv(this,"list1") 
      }; 
      document.getElementById("radio3").onchange = function(){ 
       hideDiv(this,"list2") 
      }; 
      document.getElementById("radio4").onchange = function(){ 
       showDiv(this,"list2") 
      };    
      } 

      function showDiv(targetElement,toggleElementId){ 
        if (targetElement.checked == true) { 
         document.getElementById(toggleElementId).style.visibility = "visible"; 
         document.getElementById(toggleElementId).style.display = "block"; 
        }     
      } 
      function hideDiv(targetElement,toggleElementId){ 
        if (targetElement.checked == true) { 
         document.getElementById(toggleElementId).style.visibility = "hidden"; 
         document.getElementById(toggleElementId).style.display = "none"; 
        }     
      } 
     </script> 
    </head> 
    <body onload="registerEventHandlers();"> 
     <p id="hospitalorientation"> 
      <label> 
       Hospital Orientation: 
      </label> 
      <div id='buttons'> 
       <label> 
        <input id="radio1" type="radio" name="hospital" /> Not Complete 
       </label> 
       <label> 
        <input id="radio2" type="radio" name="hospital" /> Complete 
       </label> 
      </div> 
      <div id="list1" style="display: none;"> 
       <label> 
        Month Complete: 
        <select> 
         <option>January</option> 
         <option>February</option> 
         <option>March</option> 
         <option>April</option> 
         <option>May</option> 
         <option>June</option> 
         <option>July</option> 
         <option>August</option> 
         <option>September</option> 
         <option>October</option> 
         <option>November</option> 
         <option>December</option> 
        </select> 
       </label> 
      </div> 
      <p id="ppd"> 
       <label> 
        PPD: 
       </label> 
       <div id='buttons'> 
        <label> 
         <input id="radio3" type="radio" name="ppd" /> Not Complete 
        </label> 
        <label> 
         <input id="radio4" type="radio" name="ppd" /> Complete 
        </label> 
       </div> 
       <div id="list2" style="display: none;"> 
        <label> 
        Month Complete: 
        <select> 
         <option>January</option> 
         <option>February</option> 
         <option>March</option> 
         <option>April</option> 
         <option>May</option> 
         <option>June</option> 
         <option>July</option> 
         <option>August</option> 
         <option>September</option> 
         <option>October</option> 
         <option>November</option> 
         <option>December</option> 
        </select> 
        </body> 
       </html>

來源

2011-07-27 17:13:20

必須有一些我做錯了。我正在使用記事本++。 – Emily

確保您在html中添加了id。看看小提琴 –

你的js是外置的還是內置的？ –

如果在前面的下拉菜單中進行了某些選擇，則顯示/隱藏下拉菜單

回答

相關問題