How to populate dependable drop-down using Ajax and php

Question

Hi i want to manage data on drop-down menu using Ajax.

Databse Fields:

1.id

2.name

3.department

myDesgin.php

     <select id="id"></select>
     <select id="name"></select>
     <select id="department"></select>

1.If i selected one drop-down menu want to change another drop-downs depend on selected value using Ajax.

2.Is there any code available, if i select one drop-down it go to another child window and display data as in table format(like report) using Ajax.

Thanks in Advance.

Please give me example code, because i am beginner to ajax , most welcome if someone provide explanation with code(for ajax).

http://stackoverflow.com/questions/24579361/chained-select-boxes-country-state-city check this.. hope this will help you a lot — Vivek Singh, Mar 23 '15 at 07:20
Your answer is here. http://www.plus2net.com/php_tutorial/ajax_drop_down_list.php — Abdulla Nilam, Mar 23 '15 at 07:21
I did not start on Ajax.I have just design page and dropdown fill from database.Can i post that code? — Lydia, Mar 23 '15 at 07:22
Thanks for that links i already go with that but when i tried its not give correct output.May be because of my less knowledge of Ajax. — Lydia, Mar 23 '15 at 07:23

score 20 · Accepted Answer · edited Mar 14 '17 at 08:12

Yes, check following jquery ajax code. In this example, if you change "Department" then it will populate the listing of "Name" dropdown.

$(document).on("change", '#department', function(e) {
            var department = $(this).val();
            

            $.ajax({
                type: "POST",
                data: {department: department},
                url: 'admin/users/get_name_list.php',
                dataType: 'json',
                success: function(json) {

                    var $el = $("#name");
                    $el.empty(); // remove old options
                    $el.append($("<option></option>")
                            .attr("value", '').text('Please Select'));
                    $.each(json, function(value, key) {
                        $el.append($("<option></option>")
                                .attr("value", value).text(key));
                    });              
                 

                    
                    
                }
            });

        });

$el.empty(); without remove old options can we use this ? But when i use that did not give result? — Lydia, Mar 26 '15 at 08:11
i got it. If dont want to empty the old options, remove that line and make the append option to be "selected " attribute.I edited your code, with include this. — Lydia, Mar 26 '15 at 08:32

score 3 · Answer 2 · edited Aug 07 '16 at 11:11

I guess you can do this:

make a global function which accepts two args, currElem, nextElem and dataObj:

function dynoDropdowns(currElem, nxtElem, dataObj){
    $.ajax({
        url:"path/to/file",
        type:"post",
        data:dataObj,
        dataType:"json", // <-------------expecting json from php
        success:function(data){
           $(nxtElem).empty(); // empty the field first here.
           $.each(data, function(i, obj){
               $('<option />',
               {
                   value:obj.value,
                   text:obj.text
               }
                ).appendTo(nxtElem);
           });
        },
        error:function(err){
           console.log(err);
        }
    });
}

now your change events are:

$(function(){
    $('select').on('change', function(e){
        if(this.id === "id"){
          var dataObj = {id:this.value};
          dynoDropdowns(this, '#name', dataObj);
        }else if(this.id === "name"){
          var dataObj = {name:this.value};
          dynoDropdowns(this, '#department', dataObj);
        }
    });
});

before append value to dropdown , is there any option to empty the old item.Where i put that code in your code — Lydia, Mar 26 '15 at 08:08
`$(nxtElem).empty()` you should add it before `$.each()` loop. — Jai, Mar 26 '15 at 08:11
Thanks. $('select').on('change' in that line select , means the dropdown list which you change.Right? So need to call this — Lydia, Mar 26 '15 at 08:15

score 0 · Answer 3 · answered Mar 23 '15 at 07:33

given select1 and select2 like this:

<select id="select1">
    <option id="11" value="x">X</option>
    <option id="12" value="y">Y</option>
</select>
<select id="select2">
    <option id="21" value="1">1</option>
    <option id="22" value="2">2</option>
</select>

then you can do something like this with jQuery:

$('#select1').on('change', function() {
    $.ajax({
        url: "test.html",
    }).done(function(response) {
        $('#select2').html(response);
});

This assumes your ajax call returns a string like

<option id="21" value="3">3</option><option id="22" value="4">4</option>

from your server sided file. If you return a json you have to decode it first, but this is the general gist of it. Take a look at the jQuery ajax() function

score -2 · Answer 4 · answered Mar 23 '15 at 07:23

Although there are many codes available out there. I am writing most easy and basic code for you.

HTML

<select id="id" onchange="update_name(this.id)"></select>

AJAX Code

function update_name(id)
{

    var xmlhttp=new XMLHttpRequest();
     xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
     document.getElementById("txt").innerHTML=xmlhttp.responseText;
     }
 }
    xmlhttp.open("GET","update_data.php?q="+id,true);
    xmlhttp.send();
}

update_data.php (PHP code)

<?php
   if(isset($_GET['q'])
    {
            $id= $_GET['q'];
             //based on id run your query
    }

How to populate dependable drop-down using Ajax and php

4 Answers4

Linked

Related