Question

I’ve been rebuilding my site using CodeIgniter. I am currently making the sign up page and am looking for the most efficient/ strategic way to make a dynamic drop down. This is a social network for the Cystic Fibrosis community. That being said, when registering there is a drop down that ask your relation to CF.

There are two options: 1. I have CF and 2. Someone I know has CF. I am wanting to make it to where when you select 1. a NEW drop down appears with options, and the same for 2.

Here is controller code:

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;

}

and the form on the view:

<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>

So my question is what is the best way to do this?

thanks in advance

Answer 1

You can:

1. Use ajax to get the options when the first dropdown is changed
   This requires a second controller that return the data for the second dropdown (in either HTML, JSON, or whatever you want) and JQuery/JS to tie it all together. This is good if there are lots of options and you don’t want to have to load them all up front.

2. Output all of the options with the initial page load
   This allows you to just use JQuery/JS to update the second dropdown. The data in the intial page load can either be a Javascript array or hidden HTML elements. This is easy, but increases the initial download, especially if you have lots of options.

Here is an example of having the options in the initial page load as hidden HTML elements:

<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>