選択ボックスの選択に基づいて隠しフォームフィールドを表示

ここに私が持っているフォーム要素があります。選択ボックスの選択に基づいて隠しフォームフィールドを表示

<select id="state" name="state" style="width: 212px;"> 
<option value="nsw">New South Wales</option> 
<option value="qld">Queensland</option> 
<option value="vic">Victoria</option> 
<option value="nt">Northern Territory</option> 
<option value="tas">Tasmania</option> 
<option value="sa">South Australia</option> 
<option value="wa">Western Australia</option> 
<option value="act">Australian Capital Territory</option> 
<option value="notinoz">Not in Australia</option> 
</select>

は、私は何をしたいユーザーは、上記のオプションで「オーストラリアではない」を選択した場合、これは、別の選択ボックス要素を追加下回っています。私は本当に最もきれいなコードの可能性が最も低いです。

私はdivを作成し、可視性を設定すると仮定しています：隠すだけでは、どのようにトリガーするのかわかりません。

出典

2012-01-11 422

あなたは隠された_div_を必要としない、あなたは隠された_select_を持つことができます。おそらくラベルなどが必要だと思いますが。 'visibility：hidden'ではなく' display：none'と考えることができますが、それはあなた次第です。あなたの "state" select要素のchangeイベントを処理し、 'visibility'（または' display'）を変更して次のselect要素を隠すか表示する必要があります（ちなみに、ACTはなぜ最後ですか？ bef_first _...） – nnnnnn

lol @nnnnnn私は表示しようとするつもりでした：表示するためのnone：ブロックjsを使用してそれを行う方法がわからない – 422

<!doctype html> 
<head> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 

    <script> 
     $(document).ready(function(){ 
      $("#state").change(function() { 
       // foo is the id of the other select box 
       if ($(this).val() != "notinoz") { 
        $("#foo").show(); 
       }else{ 
        $("#foo").hide(); 
       } 
      }); 
     }); 
    </script> 

</head> 


<body> 
    <p> 
     <select id="state" name="state" style="width: 212px;"> 
      <option value="nsw">New South Wales</option> 
      <option value="qld">Queensland</option> 
      <option value="vic">Victoria</option> 
      <option value="nt">Northern Territory</option> 
      <option value="tas">Tasmania</option> 
      <option value="sa">South Australia</option> 
      <option value="wa">Western Australia</option> 
      <option value="act">Australian Capital Territory</option> 
      <option value="notinoz">Not in Australia</option> 
     </select> 
    </p> 

    <p id="foo" style="display:none;"> 
     <select style="width: 212px;> 
      <option value="item1">Item</option> 
      <option value="item2">Item</option> 
      <option value="item3">Item</option> 
     </select> 
    </p> 

</body>

出典

2012-01-11 00:36:09

優れている、私は実際に要素に "高速"を追加し、隠されたと隠されたとおもしろく表示 – 422

これはjQuery、このタスクの少し残酷を含む。 – ngen

これはいかがですか？ http://jsfiddle.net/JKqWf/4/

HTML

<select id="state" name="state" style="width: 212px;" onclick='test()'> 
<option value="nsw">New South Wales</option> 
<option value="qld">Queensland</option> 
<option value="vic">Victoria</option> 
<option value="nt">Northern Territory</option> 
<option value="tas">Tasmania</option> 
<option value="sa">South Australia</option> 
<option value="wa">Western Australia</option> 
<option value="act">Australian Capital Territory</option> 
<option value="notinoz">Not in Australia</option> 
</select> 

<select id="extra" name="extra" style="display: none"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select>

function test() { 
    if (document.getElementById('state').value == 'notinoz') { 
     document.getElementById('extra').style.display = 'block'; 
    } else { 
     document.getElementById('extra').style.display = 'none'; 
    } 
}

出典

2012-01-11 00:31:07 ngen

select要素は通常 'ブロック'表示を持っていますか？ '.display = '';' 'を設定してインラインスタイルを効果的に削除し、関連するスタイルカスケードのデフォルトを有効にすることができます。 – nnnnnn

thankyou @ngenが今修正されました:) – 422

OPが実際にインラインスタイルを使用するかどうかは不明ですが、別のオプション 'document.getElementById（ 'extra'）。removeAttribute（ 'style'）'があります。 – ngen

選択ボックスの選択に基づいて隠しフォームフィールドを表示

答えて

関連する問題