CODEWITHSUNDEEP
phpjavascriptmysqlajax
Puneeth
Puneeth

Reputation: 1

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

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.

Upvotes: 0

Views: 7887

Answers (4)

cracker
cracker

Reputation: 4906

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

Upvotes: 0

AjayR
AjayR

Reputation: 4179

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.

Upvotes: 0

Chandresh M
Chandresh M

Reputation: 3828

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.

Upvotes: 2

Evgeniy Skulditsky
Evgeniy Skulditsky

Reputation: 138

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

Upvotes: 0

Related Questions