CODEWITHSUNDEEP
phpjqueryajax
Ahmad
Ahmad

Reputation: 2129

how to populate on drop down based on the value from other drop down in php and jquery?

I have one drop down which is populated from database and on the same page I have a seconde drop down which will be populated from the value of the 1st one.

I want to use ajax for this so what should I do for this. And tutorial or a link from where I can solve my problem.

Updated: Here is the code which I used.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $('#cat').onChange(function(){
    alert("oncha");
        if($('#cat').val() == 'uprofile'){
            file = 'uprofile.html';
        }else if ($('#cat').val() == 'other'){

            file = 'city.html';
        }
        $('#city').change(function(){
            loadusers = $.ajax({
                    type: "GET",
                    url: file,
                    cache: false,
                    success: function (html) {
                        $("#city").html(html);
                    }
            });
        });
    });
</script>

<tr>
           <td class="label"><span id="required_span">* </span>Category</td>
           <td colspan="2" class="data"><select name="cat" id="cat">
           <option value="0">--Select Category--</option>

           <option value="O/O">O/O</option>
           <option value="company driver">company driver</option>
           <option value="other">other</option>

           </select></td>
      </tr>

 <tr>
           <td class="label"><span id="required_span">* </span>City</td>
           <td colspan="2" class="data"><select name="city" id="city">
           <option value="0">--Select city--</option>



           </select></td>
      </tr>

Here is the content of the city.html

<option>1</option>
<option>2</option>

But cannot work even the alert function. What I am missing in the code?

Upvotes: 0

Views: 3143

Answers (2)

Claudio Carta
Claudio Carta

Reputation: 319

You can use something like this code:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(function() {
        if($('select').val() == 'uprofile'){
            file = 'uprofile.html';
        }else if ($('select').val() == 'album'){

            file = 'album.html';
        }
        $('#dropdown').change(function(){
            loadusers = $.ajax({
                    type: "GET",
                    url: file,
                    cache: false,
                    success: function (html) {
                        $("#dropdown2").html(html);
                    }
            });
        });
    });
</script>
<body>
    <div id="edit-type-wrapper">
     <select id="dropdown">
       <option value="">Select one</option>
       <option value="albums">Album</option>
       <option value="uprofile">User Profile</option>
     </select>
     <select id="dropdown2">
     </select>
    </div>
</body>

Obviously you need to return the data from the other file/files. Hope this helps

Upvotes: 1

Last Rose Studios
Last Rose Studios

Reputation: 2481

First you need to listen for the dropdown to change so 

$('#dropdown1').on('change',function(){});

in that function, you'll need to make your ajax call, and replace the options of the other dropdown, so 

  value = $(this).find(':selected').val();
  url = //the url of the php handler
  $.post(url, {val: value},function(data){});

this takes care of the ajax request, in that function you want to populate your second drop down. what you actually do here will depend entirely on what you want to accomplish, and how you are returning the data. For this example I will return the data as a string of options. 

  $('#dropdown2').html(data);

so the finished function looks like this,

  $('#dropdown1').on('change',function(){
    value = $(this).find(':selected').val();
    url = //the url of the php handler
    $.post(url, {val: value},function(data){
      $('#dropdown2').html(data);
    });
  });

Keep in mind that you will need to make changes to better fit what you have, but this should get you started in the right direction

Upvotes: 1

Related Questions