Lists not populating with JavaScript

Question

I have some HTML and JavaScript that I am trying to use to populate drop down lists based on the selection from another drop down list.

Neither list is populating the values when the form loads and I am at a loss as to why.

Expected Result: State List is supposed to load two states MN and WI when the page loads. Then the county list is supposed to generate based on the selection of the State List.

Below is the full code, but if I need to shorten it up please let me know.

window.onscroll = function() {
  myFunction()
};

var header = document.getElementById("active_loan_header");
var sticky = header.offsetTop

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

$(document).ready(function() {
  var statelist = document.getElementById('statelist');
  statelist.options[0] = new Option('--Select--', '');
  statelist.options[1] = new Option('Minnesota', 'MN');
  statelist.options[2] = new Option('Wisconsin', 'WI');
});

function getCounty() {
  var statelist = document.getElementById('statelist');
  var countylist = document.getElementById('countylist');
  var statelistSelectedValue = statelist.options[statelist.selectedIndex].value;
  if (statelistSelectedValue == 'MN') {
    countylist.options.length = 0;
    countylist.options[0] = new Option('--Select--', '');
    countylist.options[1] = new Option('Aitkin', 'Aitkin');
    countylist.options[2] = new Option('Anoka', 'Anoka');
    countylist.options[3] = new Option('Becker', 'Becker');
    countylist.options[4] = new Option('Beltrami', 'Beltrami');
    countylist.options[5] = new Option('Benton', 'Benton');
    countylist.options[6] = new Option('Big Stone', 'Big Stone');
    countylist.options[7] = new Option('Blue Earth', 'Blue Earth');
    countylist.options[8] = new Option('Brown', 'Brown');
    countylist.options[9] = new Option('Aitkin', 'Aitkin');
    countylist.options[10] = new Option('Carlton', 'Carlton');
    countylist.options[11] = new Option('Carver', 'Carver');
    countylist.options[12] = new Option('Cass', 'Cass');
    countylist.options[13] = new Option('Chisago', 'Chisago');
    countylist.options[14] = new Option('Clay', 'Clay');
    countylist.options[15] = new Option('Clearwater', 'Clearwater');
    countylist.options[16] = new Option('Cook', 'Cook');
    countylist.options[17] = new Option('Cottonwood', 'Cottonwood');
    countylist.options[18] = new Option('Crow Wing', 'Crow Wing');
    countylist.options[19] = new Option('Dakota', 'Dakota');
    countylist.options[20] = new Option('Dodge', 'Dodge');
    countylist.options[21] = new Option('Douglas', 'Douglas');
    countylist.options[22] = new Option('Faribault', 'Faribault');
    countylist.options[23] = new Option('Fillmore', 'Fillmore');
    countylist.options[24] = new Option('Freeborn', 'Freeborn');
    countylist.options[25] = new Option('Goodhue', 'Goodhue');
    countylist.options[26] = new Option('Grant', 'Grant');
    countylist.options[27] = new Option('Hennepin', 'Hennepin');
    countylist.options[28] = new Option('Houston', 'Houston');
    countylist.options[29] = new Option('Hubbard', 'Hubbard');
    countylist.options[30] = new Option('Jackson', 'Jackson');
    countylist.options[31] = new Option('Kanabec', 'Kanabec');
    countylist.options[32] = new Option('Kandiyohi', 'Kandiyohi');
    countylist.options[33] = new Option('Kittson', 'Kittson');
    countylist.options[34] = new Option('Koochiching', 'Koochiching');
    countylist.options[35] = new Option('Lac Qui Parle', 'Lac Qui Parle');
    countylist.options[36] = new Option('Lake', 'Lake');
    countylist.options[37] = new Option('Lake Of The Wood', 'Lake Of The Wood');
    countylist.options[38] = new Option('Le Sueur', 'Le Sueur');
    countylist.options[39] = new Option('Lincoln', 'Lincoln');
    countylist.options[40] = new Option('Lyon', 'Lyon');
    countylist.options[41] = new Option('Mahnomen', 'Mahnomen');
    countylist.options[42] = new Option('Marshall', 'Marshall');
    countylist.options[43] = new Option('Martin', 'Martin');
    countylist.options[44] = new Option('McLeod', 'McLeod');
    countylist.options[45] = new Option('Meeker', 'Meeker');
    countylist.options[46] = new Option('Mille Lacs', 'Mille Lacs');
    countylist.options[47] = new Option('Morrison', 'Morrison');
    countylist.options[48] = new Option('Mower', 'Mower');
    countylist.options[49] = new Option('Murray', 'Murray');
    countylist.options[50] = new Option('Nicollet', 'Nicollet');
    countylist.options[51] = new Option('Nobles', 'Nobles');
    countylist.options[52] = new Option('Norman', 'Norman');
    countylist.options[53] = new Option('Olmsted', 'Olmsted');
    countylist.options[54] = new Option('Otter Tail', 'Otter Tail');
    countylist.options[55] = new Option('Pennington', 'Pennington');
    countylist.options[56] = new Option('Pine', 'Pine');
    countylist.options[57] = new Option('Pipestone', 'Pipestone');
    countylist.options[58] = new Option('Polk', 'Polk');
    countylist.options[59] = new Option('Pope', 'Pope');
    countylist.options[60] = new Option('Ramsey', 'Ramsey');
    countylist.options[61] = new Option('Red Lake', 'Red Lake');
    countylist.options[62] = new Option('Redwood', 'Redwood');
    countylist.options[63] = new Option('Renville', 'Renville');
    countylist.options[64] = new Option('Rice', 'Rice');
    countylist.options[65] = new Option('Rock', 'Rock');
    countylist.options[66] = new Option('Roseau', 'Roseau');
    countylist.options[67] = new Option('St. Louis', 'St. Louis');
    countylist.options[68] = new Option('Scott', 'Scott');
    countylist.options[69] = new Option('Sherburne', 'Sherburne');
    countylist.options[70] = new Option('Sibley', 'Sibley');
    countylist.options[71] = new Option('Stearns', 'Stearns');
    countylist.options[72] = new Option('Steele', 'Steele');
    countylist.options[73] = new Option('Stevens', 'Stevens');
    countylist.options[74] = new Option('Swift', 'Swift');
    countylist.options[75] = new Option('Todd', 'Todd');
    countylist.options[76] = new Option('Traverse', 'Traverse');
    countylist.options[77] = new Option('Wabasha', 'Wabasha');
    countylist.options[78] = new Option('Wadena', 'Wadena');
    countylist.options[79] = new Option('Waseca', 'Waseca');
    countylist.options[80] = new Option('Washington', 'Washington');
    countylist.options[81] = new Option('Watonwan', 'Watonwan');
    countylist.options[82] = new Option('Wilkin', 'Wilkin');
    countylist.options[83] = new Option('Winona', 'Winona');
    countylist.options[84] = new Option('Wright', 'Wright');
    countylist.options[85] = new Option('Yellow Medicine', 'Yellow Medicine');
  } else if (statelistSelectedValue == 'WI') {
    countylist.options.length = 0;
    countylist.options[0] = new Option('--Select--', '');
    countylist.options[1] = new Option('La Crosse', 'La Crosse');
  }
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

.column_left {
  flex: 10%;
  padding: 10px;
  height: 800px;
  border-right-style: solid;
  border-right-width: 2px;
}

.column_right {
  flex: 90%;
  padding: 10px;
  height: 300px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

table {
  border-collapse: collapse;
}

table,
th,
tr,
td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Residential Mortgage Loan Pipeline</h1>

<div class="row">
  <div class="column_left" style="background-color:SpringGreen;">
    <div class="submitheader" id="submitloan_header">
      <h2>Submit Data</h2>
      <form action="/my-handling-form-page" method="post">
        <label for="Name">Customer Name:</label><br>
        <input type="text" id="name" name="user_name"><br><br>
        <label for="Address"><b>Subject Property:</b></label><br>
        <label for="Street">Street:</label>
        <input type="text" id="street" name="user_street"><br>
        <label for="City">City:</label>
        <input type="text" id="city" name="user_city">
        <label for="State">State:</label><br>
        <select class="form-control" id="statelist" name="statelist" onClick="getCounty()">
        </select><br>
        <label for="County">County:</label><br>
        <select class="form-control" id="countylist" name="countylist">
        </select>
      </form>
    </div>
  </div>
  <div class="column_right" style="background-color:#bbb;">
    <div class="active_header" id="active_loan_header">
      <h2>Active Loans by Loan Officer &nbsp;
        <select id="loanofficer" name="user_lo">
        </select>
      </h2>
      <table class="loanlist" id="active_loan_table">
        <tr>Loan Number &nbsp; Customer Name &nbsp; Loan Officer &nbsp; Processor &nbsp; Closing Date &nbsp; Property Address &nbsp; Loan Amount &nbsp; Purchase Price &nbsp; Appraised Value &nbsp; Title Company
        </tr>
        <tr>
          <td>Test, Customer</td>
        </tr>
      </table>
    </div>
  </div>
</div>

This is working fine for me when I'm trying it in the codepen in Firefox or Chrome. What's the issue you're having? — patstuart
– patstuart, Commented Sep 18, 2019 at 16:10

ChrisG · Accepted Answer · 2019-09-18 16:02:23Z

2

I was able to drop your code into codepen and have it work. Are you including jQuery? You're using $(document) which is jQuery.

Try adding this before your existing <script> tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

answered Sep 18, 2019 at 16:02

ChrisG

2,9781 gold badge20 silver badges20 bronze badges

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

3 Comments

Zack E Over a year ago

Thank you. I had a feeling I was missing something simple; much appreciated.

ChrisG Over a year ago

@ZackE Also, if you don't need jQuery, you can replace that line with this instead. document.addEventListener("DOMContentLoaded", function(event) { //do work });

Zack E Over a year ago

I will give that a shot too. Thanks again!

Collectives™ on Stack Overflow

Lists not populating with JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related