表示/非表示前のドロップダウンで特定の選択が行われた場合、ドロップダウン

私はフォームを持っています。私は、ラジオボタンの選択に応じてドロップダウンを無効にするか、有効にしたいと考えています。私はこの形で数回これを行う必要があります。私は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フレームワークの1つです。http://jquery.com/ –

あなたは、このアプローチでは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 = ''; 
}

、あなたのラジオボックスの値を持っており、彼らに "rButtonOne" と "rButtonTwo" などのIDを追加

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

とする必要があります。

出典

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イベントがeventHandlersが登録する様子がわかりあなたがそれらを登録しようとしたときにドキュメントが読み込まれていない可能性があります。

<!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は外部かインラインですか？ –

表示/非表示前のドロップダウンで特定の選択が行われた場合、ドロップダウン

答えて

関連する問題