Question

                     <!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>

在这里，我试图在用户选择任何地区办事处时显示区域经理姓名及其办公室配额。

但是在选择区域办事处的时候，没有任何选择，它告诉我们无法读取SelectedIndex null的属性。在这里，我创建了三个阵列，用于存储区域办事处，区域管理员和办公室配额值。

然后我使用for循环在select标签内添加区域办公室值作为选项。

Answer 1

window.onload = function_name（避免编写function_name（）;）

希望这会起作用

Answer 2

你做错了window.onload = initialize;或者您也可以使用以下代码

        <!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>

Answer 3

只需分配将被调用的函数，所以＆＃34; window.onload = initialize＆＃34;是正确的方式

Answer 4

我为您创建了一个codepen，您的选择框正在运行。此外，我已修复了您遵循的一些代码实践。希望这会有所帮助。

(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

选择标记未显示任何选项

4 个答案: