Как сделать динамическое падение в CodeIgniter?

Question

Я перестраиваю свой сайт с помощью CodeIgniter. В настоящее время я создаю страницу регистрации и ищу наиболее эффективный/стратегический способ сделать динамическое падение. Это социальная сеть для сообщества кистозных фиброзов. При этом, когда вы регистрируетесь, есть выпадающее меню, которое задает ваше отношение к CF.

Есть два варианта: 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. Использование Ajax для получения опций, когда первый выпадающий изменяется Это требует второго контроллера, которые возвращают данные для второе выпадающее меню (в HTML, JSON или что угодно) и JQuery/JS, чтобы связать все это вместе. Это хорошо, если есть много вариантов, и вы не хотите загружать их все впереди.

2. Вывести все параметры с начальной загрузкой страницы Это позволяет вам просто использовать JQuery/JS для обновления второго раскрывающегося списка. Данные в начальной загрузке страницы могут быть либо массивом 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

Если у вас есть несколько решений, пользователь должен сделать, я бы таблицу поиска в базе данных, чтобы начать с отношения родитель-ребенок среди выбранных вариантов. Таким образом, вы можете использовать ajax с jquery и выбрать дочерние элементы выбранного в данный момент параметра. Так, в принципе, я хотел бы сделать это:

• Пользователь выбирает «У меня есть CF»
• Аякс идет и получает все дети опции «Я CF» из таблицы базы данных
• JQuery получает эти параметры вернутся и отобразится следующий снимок.
• полоскание и повторить, пока все решения принимаются