obtaining the value of a select dropdown from within a function

Question

I have a method of an object called update that generates an integer, and if it's different than the value of the region variable, assigns it to region. If the integer is the same as region then the user selects a value from a <select> dropdown menu.

I'm trying to figure out how to get the value of the <select> into the function.

<form>

Select a region Northeast Southeast North Central South Central Plains Northwest Southwest

 //Destination object
 var destination= function(spec) {
  spec= spec||{};

  var that= {};




that.update= function(newDest) {
   function roll() {
    return Math.floor(Math.random()*6)+Math.floor(Math.random()*6)+Math.floor(Math.random()*2)*11;
   };
   newDest= newDest||{};

   //newDest is event
   newRegion=newDest.target.value;

   //newDest is empty object
   newRegion= newDest.region||codes[roll()][0];

   if (spec.region=== newRegion) {
    //ask user for new region
    //how do i use event handlers here?
   };

   //set new region
   spec.region= newRegion;

   //set new city
   spec.city= newDest.city||codes[roll()][newRegion];
  };

  return that;
 };

Answer 1

Unless you are using prompt, conform or alert, requesting user input will always be asynchronous. With this in mind, you can treat this interaction just as you would an AJAX request so that the event handler becomes synonymous with the AJAX response handler.

if ( spec.region === newRegion ) {
    // 1. Display a <select> in the current context or 
    // launch some sort of dialog containing the <select>.
    // 2. Attach an event handler to that <select> that is closed 
    // over in this scope, or is a method of `destination` and 
    // update `spec.region` and `spec.city`
} else {
    //set new region
    spec.region= newRegion;

    //set new city
    spec.city= newDest.city||codes[roll()][newRegion];
}