表单增强与验证——选择框（联动选择框）

HTML

<form name="two-thirds column" action="" method="post">
              <label for="equipmentType">type</label>
              <select id="equipmentType" name="equipmentType">
                <option value="choose">Please choose a type</option>
                <option value="cameras">camera</option>
                <option value="projectors">projector</option>
              </select><br>
              <label for="model">model</label>
              <select id="model" name="model">
                <option>Please choose a type first</option>
              </select>
              <input id="submit" type="submit" value="submit" />
      </form>
    <script src="js/utilities.js"></script>
    <script src="js/input-type.js"></script>

utilities.js

// Helper function to add an event listener
function addEvent (el, event, callback) {
  if ('addEventListener' in el) {                  // If addEventListener works
    el.addEventListener(event, callback, false);   // Use it
  } else {                                         // Otherwise
    el['e' + event + callback] = callback;         // CreateIE fallback
    el[event + callback] = function () {
      el['e' + event + callback](window.event);
    };
    el.attachEvent('on' + event, el[event + callback]);
  }
}

// Helper function to remove an event listener
function removeEvent(el, event, callback) {
  if ('removeEventListener' in el) {                      // If removeEventListener works
    el.removeEventListener(event, callback, false);       // Use it 
  } else {                                                // Otherwise
    el.detachEvent('on' + event, el[event + callback]);   // Create IE fallback
    el[event + callback] = null;
    el['e' + event + callback] = null;
  }
}

input-type.js

(function() {
  var type  = document.getElementById('equipmentType');// Type select box
  var model = document.getElementById('model');        // Model select box
  var cameras = {                                      // Object stores cameras
    bolex: 'Bolex Paillard H8',
    yashica: 'Yashica 30',
    pathescape: 'Pathescape Super-8 Relax',
    canon: 'Canon 512'
  };
  var projectors = {                                  // Store projectors
    kodak: 'Kodak Instamatic M55',
    bolex: 'Bolex Sound 715',
    eumig: 'Eumig Mark S',
    sankyo: 'Sankyo Dualux'
  };


  // WHEN THE USER CHANGES THE TYPE SELECT BOX
  addEvent(type, 'change', function() {
    if (this.value === 'choose') {                // No selection made
      model.innerHTML = '<option>Please choose a type first</option>';
      return;                                     // No need to proceed further
    }
    var models = getModels(this.value);           // Select the right object


    // LOOP THROUGH THE OPTIONS IN THE OBJECT TO CREATE OPTIONS
    var options = '<option>Please choose a model</option>';
    var key;
    for (key in models) {                     // Loop through models
      options += '<option value="' + key + '">' + models[key] + '</option>';
    } // If an option could contain a quote, key should be escaped (see pXXX)
    model.innerHTML = options;                    // Update select box
  });


  function getModels(equipmentType) {
    if (equipmentType === 'cameras') {            // If type is cameras
      return cameras;                             // Return cameras object
    } else if (equipmentType === 'projectors') {  // If type is projectors
      return projectors;                          // Return projectors object
    }
  }
}());