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

I want to make a dr开发者_StackOverflow社区opdown 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.

---

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.

---

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

---

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.

---

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