populating html select options on select changes

The example here demonstrates how to populate html select option values using jQuery. Two html select tags. One for categories, and one for types. Each categories should have different types. When the category is selected, the option values in the select tag for types will change accordingly.

1. The html, as simple as just two select tags.

<!DOCTYPE html>
<html>
<head>
  <title>html select options change</title>
</head>
<body>
<form>
  <select id='cate' name='cates'></select>
  <select id='type' name='types'></select>
</form>
</body>
</html>

2. The javascript, there is jQuery library, json object containing the categories and types alone with each categories, and javascript code using jQuery to populate option values in the select tag with the values coming from the json object.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var cateTypes = {
  "auto_transport": "auto_insurance,auto_payment,auto_services_parts,gas,parking,public_transportation,toll",
  "education": "books,supplies,tuition",
  "entertainment": "events_shows,games,movies,outdoors,sports,travel",
  "food": "bakery,beverages,fast_food,groceries,restaurants",
  "gift_donations": "charity,gifts",
  "health_fitness": "dentist,doctor,gym,health_insurance,medical_checkup,pharmacy",
  "housing": "furnitures,rent",
  "investments": "401k,cryptocurrency,others_i,stocks",
  "other": "other",
  "services": "financial_fees,personal_care",
  "shopping": "accessories,clothings,electronics,sporting_goods",
  "taxes": "income_taxes,other_taxes",
  "utilities": "cell_phone,electricity,internet,laundry"
};

//populate the options in the select tag on page load
for(var key in cateTypes) {
  $('#cate')
  .append($("<option></option>")
            .attr("value", key)
            .text(key)
          );
}
populateTypes('#cate');


//changes the options of the select tag for types when a new option is selected in the category select tag.
$(document).ready(function() {  
    $('#cate').change(function(){
      populateTypes(this);     
    });
 });

function populateTypes(elm) {
  var cate = $(elm).find("option:selected").attr('value');
  var types = cateTypes[cate].split(",");
  $('#type').find('option').remove();
  for(var i=0; i< types.length; i++) {
      $('#type')
        .append($("<option></option>")
                .attr("value", types[i])
                .text(types[i])
              );
  }
}
</script>

demo

Search within Codexpedia

Custom Search

Search the entire web

Custom Search