populate select from other select value using jque

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 that will select a account and on the basis of that selected id i want to populate other select with values fetched from database based on first selected option. I have first select which is like this

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

Now what I want that on the basis of first select, the other other select is populated using jquery. The options will be values fetched from database on the basis of first selected value. my other select is

<select name='client'>
</select>

Which function of jquery supports this that I can fetched values from database on the basisi of selected option and populate other select. I am using zendframe work. Any idea?

Answer 1

If you are using jQuery you can use this plugin

Demonstration and usage shown here

Answer 2

Have a look at jQuery Ajax API.

Answer 3

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.

Answer 4

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);
          }
        });
    })

})