populate select from other select value using jquery

Question

hi all I have seen many question but no one has fulfilled my thirst. I want to populate select on the basis of one other select. I am using zend framework. I have a select t

Answer 1

You need to bind a change event for your first dropdown. Then in that dropdown you need to call an ajax function to your php page, which will give you the new selection for your 2nd dropdown. and on the first dropdown's ajax success function you will populate the 2nd dropdown.

For ajax calling you can see http://api.jquery.com/jQuery.ajax/

Sample:

<select id='ddl_account'>
    <option value='1'>accoutn1</option>
    <option value='2'>accoutn2</option>
    <option value='3'>accoutn3</option>
    <option value='4'>accoutn4</option>
</select>

<select id='ddl_account_2nd'>
</select>

$(document).ready(function(){
    $('#ddl_account').change(function(){
       $.ajax({
          type: "POST",
           url: "account.php",
           data: "account=" + $(this).val(),
          success: function(options){
            //options = "<option value='1'>accoutn1</option><option value='2'>accoutn2</option>"
            $('#ddl_account_2nd').empty().append(options);
          }
        });
    })

})

Answer 2

If you are using jQuery you can use this plugin

Demonstration and usage shown here

Answer 3

Have a look at jQuery Ajax API.

Answer 4

Using events you can bind the first select. Instead of name, use ID or a class.

Using a $.get() you could dynamically get info from a php page. Make that php Page echo out the < option > tags you need for the second drop down.

Bind this into an onclick event to get the currently selected value, OR use a selector to get it:

var SelectedVal = $('#option1').val();
var Content;

$.get('GetValues.php?SelectedValue=' + SelectedVal , function(data) {
 Content = data;
});

Then using $('#client').append(Content); you can fill the select. Append will add "Content" inside the tag.

Hope this gives you a good starting point.