CODEWITHSUNDEEP
jqueryhtmlajaxdrop-down-menu
Lucy MacGregor
Lucy MacGregor

Reputation: 83

Populate div with .load based on drop down selection

Alright this feels like a basic thing, but im struggling to make it work - What I'm trying to accomplish is a drop down list with about 45 county's, when one is selected, an empty div in the body will load with a div from another html page (where I'm going to house the 45 divs of corresponding location information).

Intending on using an ajax load style event

<script>
$(document).ready(function(){
        $("#county-result").load("county_list.html #county1");
});
</script>

But to make the script less heavy I would want the dropdown value to be its matching county div id to populate that part of the load function (rather then writing 45 individual ones)

Ideas on how I can do this?

Upvotes: 0

Views: 3150

Answers (2)

Angular Dev
Angular Dev

Reputation: 4916

I created a plunkr for you! I hope it helps

What I'm basically doing here is, I'm adding a change event listener to a select (dropdown) And I make sure my divs in the countries html file have the same id's as my option values in my main file (The one where you will have the dropdown menu)

So if you want information about germany you have to make sure a countries option and div will look a bit like this

<option value="germany">germany</option> 

<div id="germany">
    <h1>Berlin</h1>
</div>

Upvotes: 1

Wesley Smith
Wesley Smith

Reputation: 19571

This question is a bit broad. But, if I needed to work with information related to 45 counties and needed to display the info for the county selected from a dropdown, I'd use JSON as my data source and populate the divs using a template and iterating over the JSON object and looking for the selected id.

The below is an example of how that might work. Note that I'm actually building the select box options dynamically based on the dataset itself and the setup allows you to easily update the data if needed.

Note how you get the JSON is up to you. I have hard coded it for this example but you could get it via an ajax request or using .get(), .load(), etc..

var myCountyInfo = {
  counties: [{
    name: 'County 1',
    id:123,
    locationInfo: {
      lat: 453245,
      lng: 45545,
      avgTemp: '75f',
      population: '5 B.'
    }
  }, {
    name: 'County 2',
    id:456,
    locationInfo: {
      lat: 11221,
      lng: 542222,
      avgTemp: '59f',
      population: '2 B.'
    }
  }, {
    name: 'County 3',
    id:789,
    locationInfo: {
      lat: 88555,
      lng: 54757,
      avgTemp: '58f',
      population: '1 B.'
    }
  }]
}

function populateSelectBoxes($select, data) {
  var counties = [];
  $.each(data, function() {
    counties.push('<option value="'+this.id+'">' + this.name + '</option>');
  });
  $select.append(counties.join(''));
}

function populateTableRow($tableBody, data, selectedCountyId) {
  var county;
  $.each(data, function() {
    if (this.id == selectedCountyId) {
      county = this;
      return false;
    }
  });
  $tableBody.html('<tr>'+
                     '<td>' + county.name + '</td>'+
                     '<td>' + county.locationInfo.lat +'</td>'+
                     '<td>' + county.locationInfo.lng + '</td>'+
                     '<td>' + county.locationInfo.avgTemp + '</td>'+
                     '<td>' + county.locationInfo.population + '</td>'+
                  '</tr>');


}
populateSelectBoxes($('#my-select'), myCountyInfo.counties);

$('#my-select').change(function() {
  var $this = $(this);
  var selection = $this.val();
  populateTableRow($('#my-table tbody'), myCountyInfo.counties, selection);
});
td,th{
  padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="my-select"></select>

<table id="my-table" border="1">
  <thead>
    <tr>
      <th>County</th>
      <th>Lat.</th>
      <th>Lng.</th>
      <th>Avg Temp</th>
      <th>Population</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Upvotes: 1

Related Questions