Как сделать динамический выпадающий в CodeIgniter?

Question

Я перестраивал свой сайт с помощью CodeIgniter.В настоящее время я делаю страницу регистрации и ищу наиболее эффективный / стратегический способ сделать динамический выпадающий список.Это социальная сеть сообщества Cystic Fibrosis.При этом, при регистрации есть выпадающий список, который спрашивает ваше отношение к 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

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

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

Answer 2

Вы можете:

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>