how to change select values when select an option from other drop down box in codeigniter

Question

I have two drop down boxes its values are fetched from utility libray

    public $email_hooks = array(
    "create_user" => array(
            "name" => "New user creation",
            "keys" => array(
                "site_url" => "Site URL",
                "current_date" => "Current Date",
                "user_name" => "User name", 
                "name" => "Name of the user",
                "password" => "Password of user",
                "user_email"  => "Email address of new user"
            ),
            "content_type" => array("html","text"),
            "to" => array("User", "Site Admin"),
            "cc"    => array("Site Admin"),
            "bcc"   => array("Site Admin")
        ),
    "register_user" => array(
            "name" => "New user registration",
            "keys" => array(
                "site_url" => "Site URL",
                "current_date" => "Current Date",
                "user_name" => "User name", 
                "name" => "Name of the user",
                "activation_url" => "Url for activation registered account",
                "user_email"  => "Email address of the user"
            ),
            "content_type" => array("html","text"),
            "to" => array("User", "Site Admin","new user"),
            "cc"    => array("Site Admin"),
            "bcc"   => array("Site Admin")
        ));

following are view code

            <div class="form-group col-lg-12">
            <label class="control-label col-lg-2">Name</label>
            <div class="col-lg-4">
                <select id ="choose" class="form-control" name="name">
                    <option value="">Select One</option>
                     <?php 
                        foreach($email_hooks as $key=>$val)
                        {
                            echo '<option value="'.$key.'">'.$val['name'].'</option>';
                        }
                    ?>

                </select>
            </div>
            <div class="col-lg-6" id="email_tmpl"></div>
            </div>

            <div class="form-group col-lg-12">
            <label class="control-label col-lg-2">Notification to</label>
            <div class="col-lg-10">
                <select id ="notification" class="form-control" name="notification">
                    <option value="">Select One</option>

                </select>
            </div>
            </div>

When select first drop down box value,i want to change 2nd dropdown values ,ie "to" => array("User", "Site Admin","new user").these array values change according with the first selection box.

Answer 1

Write a javascript/jquery function and get the value from your first drop-down through java script or jquery. Then use onchange to call the function and then append the array accordingly to the second drop-down menu. Hope this works...

Your first Dropdown:

<select id ="choose" class="form-control" name="name" onchange="your_javascript_function()">

Use javascript function and use jquery append function and each function in it:

 function your_javascript_function
 {$.each(your_array, function() {
        $('#notification').append( $('<option value="' + this.value_from_array + '">' + this.value_from_array + '</option>' ));
    });
  }