How to populate a dropdown list by selecting the value from another dropdown list?

Question

I want to make a dropdown list (html <select>) of employees by selecting the value of department from another dropdown.

Here by selecting department from dropdown list the employees who are under this department must be shown in a dropdown list.

Answer 1

You should use AJAX for that.

//First combo box. where onchange event having ajax function.
<select name="parent_category" id="parent_category" onchange="change_category(this.value);" >
                                                                <option value="0">option1</option>
    <option value="1">option2</option>
    <option value="2">option3</option>
    <option value="3">option4</option>
      </select>

//Second combo box. where response of ajax call display here.
    <div class="selectbox" id="response_sub_cat">
     <select name="sub_category" id="sub_category">
     <option value="">--Choose Sub Category--</option>
     </select>
    </div>


function change_category(id)
{

        $.ajax({
            type: "POST",
            url: "ajax_get_sub_category.php?subcat="+sub_cat,
            data:   "pid=" + id,
            success: function(html){
                $("#response_sub_cat").html(html);
            }
        });
}

Regarding this subcat value there should be one query in php file to get subcategory. In your case its would be department and employees

Its may helpful to you..

Thnaks.

Answer 2

Please try with

var x;

$('#pu-country').on('change', function () {
    if (this.value != '0') {

        $('#pu-city').prop('disabled', false);
        $('#pu-city').find("option").not(":first").remove();
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");

        switch (this.value) {
            case 'A':
                x = '<option value="A.1">A.1</option><option value="A.2">A.2</option><option value="A.3">A.3</option>'
        }
        $('#pu-city').append(x)
    } else {
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");
        $('#pu-city').prop('disabled', true);
        $('#pu-city').val("Choose");
    }


});

$('#pu-city').on('change', function () {
    if (this.value != '0') {

        $('#pu-location').prop('disabled', false);
        $('#pu-location').find("option").not(":first").remove();

        switch (this.value) {
            case 'A.1':
                x = '<option value="A.1.1">A.1.1</option><option value="A.1.2">A.1.2</option><option value="A.1.3">A.1.3</option>'
                break;
            case 'A.2':
                x = '<option value="A.2.1">A.2.1</option><option value="A.2.2">A.2.2</option><option value="A.2.3">A.2.3</option>'
                break;
            case 'A.3':
                x = '<option value="A.3.1">A.3.1</option><option value="A.3.2">A.3.2</option><option value="A.3.3">A.3.3</option>'
                break;

        }

        $('#pu-location').append(x)
    } else {
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");
    }


});

If you want to check the demo then please try here Fiddler

Answer 3

You can do with AJAX. Here is the logic.

Create a php page like this (Please note this is only for reference logic, not the actual code)

<?php
$dept = $_GET['dept'];

echo '<select >';
while (....)
{
  echo "<option value=''>".$emp ."</option>".
}
?>

and call an javascript function to call this page and fill in emp div tag.

If you use JQuery, there are simple methods to do this to call and fill.

Answer 4

If you have 2-3 lists and don't want to use ajax you should try http://www.bobbyvandersluis.com/articles/unobtrusive_dynamic_select/index.html