CodeIgniterで動的なドロップダウンを作成する方法は？

Question

私はCodeIgniterを使用して自分のサイトを再構築しています。私は現在、サインアップページを作成しており、動的なドロップダウンを行う最も効率的で戦略的な方法を探しています。これは嚢胞性線維症の社会的ネットワークです。つまり、登録するときにCFとの関係を尋ねるドロップダウンがあります。

2つのオプションがあります：1.私はCFと2を持っています。私が知っている人はCFを持っています。私はあなたが1を選択すると、新しいドロップダウンがここ2

ためのオプションが表示され、同じ場所にそれを作るために望んでいコントローラのコードです：

function relation_dropdown($relation="relation", $top_relations=array()) { 
    $relations = array(
      "choose"=>"Choose One", 
      "I have CF"=>"I have CF", 
      "Someone I know has CF" 
    ); 

    $html = "<select name='{$relation}'>"; 
    if(!empty($top_relations)){ 
     foreach($top_relations as $value){ 
      if(array_key_exists($value, $relations)){ 
       $html .="<option value='{$value}'>{$relations[$value]}</option>"; 
      } 
     } 
     $html .="<option>----------</option>"; 
    } 
    foreach($relations as $key => $relation){ 
     $html .="<option value='{$key}'>{$relation}</option>"; 
    } 
    $html .="</select>"; 
    return $html; 

} 

とビューの形式：

<div id="signup_form"> 
    <?php 
     echo validation_errors(); 
     echo form_open('general/send?'); 
     echo "<div class='form_text'>First Name</div>"; 
     echo form_input('first_name'); 
     echo "<div class='form_text'>Last Name</div>"; 
     echo form_input('last_name'); 
     echo "<div class='form_text'>Email</div>"; 
     echo form_input('email'); 
     echo "<div class='form_text'>Confirm Email</div>"; 
     echo form_input('confirm_email'); 
     echo "<div class='form_text'>Password</div>"; 
     echo form_input('password'); 
     echo "<div class='form_text'>Confirm Password</div>"; 
     echo form_input('confirm_password'); 
     echo "<div class='dropdown_structure'>"; 
     echo "<div class='form_text'>"; 
     echo "Location"; 
     echo "</div>"; 
     echo country_dropdown('country'); 
     echo "</div>"; 
     echo "<div class='dropdown_structure'>"; 
     echo "<div class='form_text'>"; 
     echo "Relation To CF"; 
     echo "</div>"; 
     echo relation_dropdown('relation'); 
     echo "</div>"; 
     echo form_close(); 
    ?> 
</div> 

私の質問はこれを行うための最善の方法です。あなたは、ユーザーが作成する必要があり、複数の意思決定を持っている場合は、事前

Answer 1

を作っていることはでき：用のデータを返す最初のドロップダウンはこれが第二のコントローラを必要と を変更されたオプションを取得するために

1. 使用アヤックス2番目のドロップダウン（HTML、JSONなど）とJQuery/JSを組み合わせてこれはオプションがたくさんあり、それらをすべて前面にロードしたくない場合に便利です。

2. 初期ページの負荷ですべてのオプションを出力します これにより、JQuery/JSを使用して2番目のドロップダウンを更新することができます。最初のページ読み込みのデータは、Javascript配列でも、非表示のHTML要素でもかまいません。これは簡単ですが、特に多くのオプションがある場合は、最初のダウンロードが増えます。ここで

は、隠されたHTML要素として、最初のページのロードのオプションを持っていることの一例です：

<select id="dropdown1" name="dropdown1"> 
    <option value="1">option 1</option> 
    <option value="2">option 2</option> 
    <option value="3">option 3</option> 
</select> 

<select id="dropdown2" name="dropdown2" disabled="disabled"> 
    <option value="">select an option</option> 
</select> 

<select id="dropdown2a" name="dropdown2a" style="display: none"> 
    <option value="a">option a</option> 
    <option value="b">option b</option> 
    <option value="c">option c</option> 
</select> 

<select id="dropdown2b" name="dropdown2b" style="display: none"> 
    <option value="i">option i</option> 
    <option value="ii">option ii</option> 
</select> 

<select id="dropdown2c" name="dropdown2c" style="display: none"> 
    <option value="x">option x</option> 
    <option value="y">option y</option> 
</select> 

<script type="text/javascript"> 
    $(function() 
    { 
     $('#dropdown1').change(function(){ 
      var val = ('#dropdown1').val(); 

      if (val == 1) 
      { 
       $('#dropdown2').html($('#dropdown2a').html()); 
      } 
      else if (val == 2) 
      { 
       $('#dropdown2').html($('#dropdown2b').html()); 
      } 
      else if (val == 3) 
      { 
       $('#dropdown2').html($('#dropdown2c').html()); 
      } 

      $('#dropdown2').removeAttr("disabled"); 
     }); 
    }); 
</script> 

Answer 2

で

おかげで、私が選択したオプション間の親子関係を、開始するデータベース内のルックアップテーブルを持っているでしょう。こうすることで、jQueryでajaxを使用し、現在選択されているオプションの子を選択できます。 だから、基本的に、私はこれを行うだろう：

• ユーザーが選択
• アヤックスが行くと
• jQueryの取得データベーステーブルから「私はCFを持っている」オプションのすべての子を取得します「私はCFを持っています」これらのオプションは戻って、次のドロップダウンを表示します。すべての決定まで
• すすぎと繰り返して