2010-12-23 12 views
2

私はHTMLを使ってウェブサイトをプログラミングしようとしていますが、質問があります。私はオプションAとBでドロップダウンリストを使用していますが、このうちの1つが選択された後、同じページに別のドロップダウンリストとテキストフィールドを作成したいと思います。たとえば、ある人がAを選択すると、CとDという質問が出され、誰かがBを選んだ場合はEとFの質問が出ます。これをプログラムする最良の方法は何ですか?条件付きの単純なドロップダウンリスト?

英語で間違いがありましたら申し訳ありませんが、私はネイティブスピーカーではありません。 ありがとうございます。

+0

いくつかのコードを表示できますか? – ifaour

+0

これにはjavascriptが必要です。答えは少し複雑かもしれません。 – yoda

+1

ダイナミックデータがある場合は、http://stackoverflow.com/questions/3637972/whats-the-best-and-easiest-way-to-populate-a-dropdown-on-other-dropdownをチェックすることができますデータベースから)。同じ質問http:// stackoverflowに対する私の答えをチェックしてください。com/questions/3637972/whats-the-best-and-easy-way-to-populate-a-drop-on-another-dropdown/3638893#3638893 –

答えて

4

データが静的(つまり、ページにコード化され、変更されない)か、動的(つまり、Webサーバーから配信される)かによって異なります。

ドロップダウンリストがリストAに基づいてコンテンツのみをフィルタリングすることになっている場合は、JavaScriptを使用して不要なアイテムを非表示にすることができます。これは非常に使いやすく、理解しやすいフレームワークなので、jQueryを検討してみてください。また、スタックオーバーフローや参照可能なインターネット上でたくさんの良い例があります。

Webサーバーからデータを配信する必要がある場合(つまり、リスト値を参照しているデータベースがある場合)、プログラミングフレームワークに関する詳細情報を提供する必要があります(ASP.Netなど) 、PHPなど)、リストをどのように動作させるか(Ajax、全面ポストバックなど)

あなたはすべてのページを静的に保ち、ユーザーの選択に基づいて情報を隠しているとします。そして、このようになります

<body> 
    <div id="myQuestions"> 
     <select id="QuestionOptions"> 
      <option value="A">Question A</option> 
      <option value="B">Question B</option> 
     </select> 
    </div> 
    <div id="myAnswers"> 
     <div id="A" style="display: none;"> 
      <div id="QuestionC"> 
       <p>Here is an example question C.</p> 
      </div> 
      <div id="QuestionD"> 
       <select id="QuestionOptionsD"> 
        <option value="G">Question G</option> 
        <option value="H">Question H</option> 
       </select> 
      </div> 
     </div> 
     <div id="B" style="display: none;"> 
      <div id="QuestionE"> 
       <p>Here is an example question E.</p> 
      </div> 
      <div id="QuestionF"> 
       <select id="QuestionOptionsF"> 
        <option value="I">Question I</option> 
        <option value="J">Question J</option> 
       </select> 
      </div> 
     </div> 
    </div> 
</body> 

あなたのJavaScript(前述したように、私は、jQueryのを使用しています)::

あなたのHTMLは次のようになります

$(function() { 
    $('#QuestionOptions').change(function() { 
     $('#myAnswers > div').hide(); 
     $('#myAnswers').find('#' + $(this).val()).show(); 
    }); 
}); 
+0

こんにちは、お返事いただきありがとうございます。機能のために、私は部分にの機能のコードを

0

は隠しドロップダウンを持っていること最初のドロップダウンの各オプションに対応します。最初のドロップダウンでonclickハンドラを使用して、対応する非表示のドロップダウンの隠し属性を変更します。

jQueryは、この1つであなたの人生を楽にするかもしれません。

+0

**彼の人生を楽にする= P –

0

javacript appendChild()(例Here)を使用して、どのオプションが選択されているかに基づいてdivを動的に追加することができます。あるいは、他の静的なものを静的に選択してCSSで隠しておき、どちらを選択するかを選択することができます。

0

私はあなたの質問を理解できないかもしれませんが、かもしれません。は事を過度に複雑にしています。あなたが単にJavaScriptを必要としない2つの別々の質問のプロンプトを表示しようとしているのであれば、異なる質問を持つ2つの別々のページを持つことができます。 A - >は質問C/Dのページにリンクし、B-> E/Fにリンクします。

インターフェイスの質問については、いくつかのコードやデモを投稿してみてください...あなたの質問を明確にするのに非常に役立ちます。

+2

これは、Javascriptを使用してフォームの要素をユーザーエクスペリエンスの観点から隠して表示するよりも最適ではない可能性があります。 – Chetan

+0

最適なのはJavaScriptの依存関係ですか?私がそこに同意するかどうか分からない。 –