CODEWITHSUNDEEP
javascript
user9228388
user9228388

Reputation:

Select tag is not showing any option

                     <!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8">
      <title>Parallel Array Lookup II</title>
      <script>
      window.onload=initialize();

          function initialize()
{
   // do this only if the browser can handle DOM methods
   if (document.getElementById)
   {

aRegionalOffices = ["New York", "Chicago", "Houston", "Portland"];
aRegionalManagers = ["Shirley Smith", "Todd Gaston", "Leslie Jones",
                     "Harold Zoot"];
aRegOfficeQuotas = [300000, 250000, 350000, 225000];
// point to the critical input fields & save in global variables
oSelect = document.getElementById('offices');
oManager = document.getElementById('manager');
oQuota = document.getElementById('quota');
   // if they all exist...
       if (oSelect && oManager && oQuota)
         {
            // build the drop-down list of regional offices
            for (var i = 0; i < aRegionalOffices.length; i++)
            {
               oSelect.options[i] = new Option(aRegionalOffices[i]);
            }
            // set the onchange behavior
            //addEvent(oSelect, ‘change’, getData);
             oSelect.addEventListener('change',getData);
         }
      // plug in data for the default select option
getData(); 
   }
}

       function getData(evt)
{
   // get the offset of the selected option
   var index = oSelect.selectedIndex;
   // get data from the same offset in the parallel arrays
   oManager.value = aRegionalManagers[index];
   oQuota.value = aRegOfficeQuotas[index];
}

      </script>

   </head>
   <body>
       <h1>Parallel Array Lookup</h1>
       <form id="officeData" action="" method="post">
          <p>
             <label for="offices">Select a regional office:</label>
             <select id="offices" name="offices">
             </select>
</p> <p>
             <label for="manager">The manager is:</label>
             <input type="text" id="manager" name="manager" size="35" />
          </p>
          <p>
             <label for="quota">The office quota is:</label>
             <input type="text" id="quota" name="quota" size="8" />
</p> </form>
    </body>
</html>

Here I am trying to display regional manager names and their office quotas when user select any regional offices .

But while selecting regional office ,no option is coming and it is telling that cannot read property of SelectedIndex null. Here I have created three arrays for storing regional offices ,regionalMangers and office quotas values .

I am then making use of for loop for adding regional office value as option inside select tag.

Error Screenshot

Upvotes: 0

Views: 111

Answers (4)

damitj07
damitj07

Reputation: 2899

I have created a codepen for you, where your select box is running. Also, I have fixed some code practices you have followed. Hope this helps.

(function() {
  var aRegionalOffices = ["New York", "Chicago", "Houston", "Portland"];
  var aRegionalManagers = [
    "Shirley Smith",
    "Todd Gaston",
    "Leslie Jones",
    "Harold Zoot"
  ];
  var aRegOfficeQuotas = [300000, 250000, 350000, 225000];
 var  oSelect = document.getElementById("offices");
  if (oSelect) {
    // build the drop-down list of regional offices
    for (var i = 0; i < aRegionalOffices.length; i++) {
      oSelect.options[i] = new Option(aRegionalOffices[i]);
    }
    oSelect.addEventListener("change", getData);
  }

  var getData = function(evt) {
    var index = 0;
    index = document.getElementById("offices").selectedIndex;
    console.log(index);
    document.getElementById("manager").value = aRegionalManagers[index];
    document.getElementById("quota").value = aRegOfficeQuotas[index];
  };

  getData();

})();

Code snippet here

Upvotes: 0

GoeGoSu
GoeGoSu

Reputation: 1

just allocate which function would be invocated, so "window.onload = initialize" is right way

Upvotes: 0

Danny
Danny

Reputation: 193

window.onload= function_name (avoid writing function_name();)

Hope this will work

Upvotes: 1

Pubudu Jayasanka
Pubudu Jayasanka

Reputation: 1462

you have done mistake window.onload=initialize; or you can use following code also

        <!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>Parallel Array Lookup II</title>
  <script>

  var states = new Array();
  states['India'] = new Array('ttttt', 'eeeee', 'aaaa', 'qqqq'); 

  function setStates() {
   var newOptions=states['India'];
   var newValues=states['India'];
   selectField = document.getElementById("state");
   selectField.options.length = 0;
    for (i=0; i<newOptions.length; i++) 
     {
   selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
    }
  }
  </script>

  </head>
  <body onload="setStates();">
   <h1>Parallel Array Lookup</h1>
   <form id="officeData" action="" method="post">
      <p>
       <label>State :</label>
   <select style="width:auto;" name="state" id="state">
    <option value="">Please select a Country</option>
   </select><br>
   </p> <p>
         <label for="manager">The manager is:</label>
         <input type="text" id="manager" name="manager" size="35" />
      </p>
      <p>
         <label for="quota">The office quota is:</label>
         <input type="text" id="quota" name="quota" size="8" />
   </p> </form>
   </body>
   </html>

Upvotes: 0

Related Questions