他のフィールド値に基づいて変更するフィールドを持つHTMLでフォームを作成するには

Question

他のフィールドの値に応じてオプションのメニューを持つフォームをすばやく作成する必要があります。私は普通のHTMLで何も見つけられませんでした。それはHTMLだけで可能ですか？

Answer 1

プレーンHTMLはおそらくタスクに任されません（HTML5には私が気づいていない新しい動的機能がない限り、これは完全に可能です）。しかし、JavaScript（特にjQueryを使用している場合）では、フォームの状態に基づいてフォーム要素とページセクションを動的に表示/非表示/変更するのは簡単です。

あなたは、ダイナミックコンテンツを駆動するフォーム要素にイベントリスナーを添付し、それに応じてリスナーがページ要素を表示/非表示/変更するようにします。あなたは不自然な例hereを見てとることができます。

HTML：

<div id="firstSection"> 
    <select id="selectSomething"> 
     <option>Select...</option> 
     <option>One</option> 
     <option>Two</option> 
    </select> 
</div> 
<div id="optionalSection"> 
    <select id="selectSomethingElse"> 
     <option>Select...</option> 
     <option>Three</option> 
     <option>Four</option> 
    </select> 
</div> 

CSS：

JavaScriptの

#optionalSection 
{ 
    display: none; 
} 

：

$('#selectSomething').change(function() { 
    if ($('#selectSomething').val() == 'Two') { 
     $('#optionalSection').show(); 
    } else { 
     $('#optionalSection').hide(); 
    } 
}); 

は、基本的に第二節では、条件付きで応じて表示されます最初のセクションで現在選択されているものについて

サーバーの観点からは、すべてのフォーム要素が依然として値を送信することに注意してください。この方法では、フォームに2番目のセクションが含まれることはなく、ユーザーにのみ表示されることはありません。サーバー側でフォームの結果を処理する場合は、それに応じてビジネスロジックを再検証する必要があります。 （ユーザーからの有効なコンテンツは絶対に使用しないでください）

Answer 2

これはHTMLのみでは可能ではないと思われますが、JavaScriptは動作するはずです。