मेरे पास कुछ HTML और जावास्क्रिप्ट हैं जिनका उपयोग मैं किसी अन्य ड्रॉप डाउन सूची से चयन के आधार पर ड्रॉप डाउन सूचियों को पॉप्युलेट करने के लिए करने का प्रयास कर रहा हूं।

फॉर्म लोड होने पर न तो सूची मूल्यों को पॉप्युलेट कर रही है और मुझे नुकसान हुआ है कि क्यों।

अपेक्षित परिणाम: राज्य सूची को पृष्ठ लोड होने पर दो राज्यों MN और WI को लोड करना चाहिए। फिर राज्य सूची के चयन के आधार पर काउंटी सूची तैयार की जानी चाहिए।

नीचे पूरा कोड है, लेकिन अगर मुझे इसे छोटा करना है तो कृपया मुझे बताएं।

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>
1
Zack E 18 सितंबर 2019, 18:53

1 उत्तर

सबसे बढ़िया उत्तर

मैं आपके कोड को कोडपेन में छोड़ने और इसे काम करने में सक्षम था। क्या आप jQuery सहित हैं? आप $(document) का उपयोग कर रहे हैं जो कि jQuery है।

इसे अपने मौजूदा <script> टैग से पहले जोड़ने का प्रयास करें।

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

2
ChrisG 18 सितंबर 2019, 16:02