CODEWITHSUNDEEP
javascripthtml
Zack E
Zack E

Reputation: 706

Lists not populating with JavaScript

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>

Upvotes: 1

Views: 70

Answers (1)

ChrisG
ChrisG

Reputation: 2948

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>

Upvotes: 2

Related Questions