How to fetch the data from database while selecting a select option from jquery

Question

I am using codeigniter for my project and I am passing array values on view.

Let me elaborate by giving a proper look to the view, controller and model structure.

Model:

public function getTournament() {
    $this->db->select('tourn_id,tourn_name,tourn_teams');
    $this->db->from('tournaments');
    $query = $this->db->get();
    return $query->result_array();
}

Controller

public function index() {
    $result['tournament']=$this->matches_model->getTournament();
    $this->template->set_layout('admin')->enable_parser(FALSE)->title('Add Matches - Cricnepal Live Update')->build('admin/add/matches_view', $result);
}

View:

<select name="tournament_match" class="form-control" id="tournament_match">
    <option value=''>--- Select Tournament ---</option>
    <?php 
        foreach ($tournament as $row):
            $match_TournamentName=$row['tourn_name'];
            $match_TournamentID=$row['tourn_id'];
            $teamlist=$row['tourn_teams'];
            echo '<option value='.$match_TournamentID.'>'.$match_TournamentName.'</option>'; 
        endforeach;
    ?>
</select>

Problem:

<select name="tournament_match" class="form-control" id="tournament_match">
      <option value="">--- Select Tournament ---</option>
      <option value="1">Cricnepal Cricket Tournament</option>
      <option value="2">Nepal Cricket Tournament</option>
</select>

I want to display a new select option field below it which shows the data of respected selected option value.

For example, if I select "Cricnepal Cricket Tournament" then I need to get all the associated data related to it from the database instantly using jQuery or other method so it can be added as a new option element.

Mubashar Abbas · Accepted Answer · 2015-08-11 05:51:52Z

3

You can use a jquery 'ajax' call like below:

$('#tournament_match').change(function() {
   var selected_option = $(this).val();
   $.ajax({
      url: <YOUR URL TO HANDLE THE REQUEST>+"/"+selected_option,
      type: 'post',
      cache: false,
      success: function(return_data) {
         $('#second_select').html(return_data);
      }
   });
});

Where 'second_select' is the id of the second drop down.

answered Aug 11, 2015 at 5:51

Mubashar Abbas

5,7234 gold badges42 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

user3458883 Over a year ago

Thank for the reply. Let me check on it and will post it

Mubashar Abbas Over a year ago

Okay let me know if run into any problem.

user3458883 Over a year ago

The jquery code is not functioning .. i tried by doing alert (some value) but it is not showing up any things .. is there is any syntax error ??

user3458883 Over a year ago

Thank You !!! you made my work ...thank you so much ...really i dont know how to express now ...thank you

user3458883 Over a year ago

The url part in the ajax was mistake by me so it was getting a bit problem for so much time....

|

Mubashar Abbas · Accepted Answer · 2015-08-12 07:52:04Z

Here is how your html will go:

<select name="tournament_match" class="form-control" id="tournament_match">
      <option value="">--- Select Tournament ---</option>
      <option value="1">Cricnepal Cricket Tournament</option>
      <option value="2">Nepal Cricket Tournament</option>
</select>
<select name="second_select" id="second_select"></select>

And your js will be:

$('#tournament_match').change(function() {
   var selected_option = $(this).val();
   $.ajax({
      url: <YOUR URL TO HANDLE THE REQUEST>+"/"+selected_option,
      type: 'post',
      cache: false,
      success: function(return_data) {
         $('#second_select').html(return_data);
      }
   });
});

And the php to handle the ajax request will be like this:

$newoptions = ['apples','oranges','bananas']; //values from the db or some api source.
$ret_val = '';
foreach($newoptions as $option) {
   $ret_val .= "<option>$option</option>";
}
echo $ret_val;

There you go buddy. I don't think you should have a problem anymore.

Collectives™ on Stack Overflow

How to fetch the data from database while selecting a select option from jquery

2 Answers 2

19 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

19 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related