如何在下拉菜单中仅加载当前和未来事件并删除旧事件

I was wondering, if it is possible to dynamically add only current and future events in a dropdown menu, and not load the older events. On our current forms, we have to manually remove the events from script and that is not an efficient way.

Thanks, any pointers would be appreciated.

<select name="Event" Height="18px" Width="187px">
                  <option value="" selected>Select One</option>
                  <option value="Charles Hall Committee Meeting">Charles Hall Committee Meeting- July 7 2013</option>
 <option value="Townhall Meeting">Townhall Meeting-September 12 2013</option>
</select>

These events need to be displayed in a dropdown and should not display if the date is over

As I previously mentioned an MVC framework would be a good option. Choosing the right MVC framework though - you have many options there. You can even just do this with pure Javascript, or even jQuery - but MVC's will eventually make your life easier. The example I've provided below uses AngularJS (which is pretty heavy, maybe too heavy for your intended use but once you start working your way through Angular it makes your life super easy).

I won't make this answer a tutorial on AngularJS but I'd recommend you going through tutorials and documentation on it from a variety of resources you can find online (starting with Angular's site itself). Here is the demo showing an example of how to use angular to dynamically populate your options for a select dropdown - which you can follow.

First, I'm assuming the events is an array of objects with name and date attributes. Then using angular's select directive, we can display these items as options by setting up the ngOptions (documented here). The snippet below will populate <option> elements with the name property of all your events.

<select ng-model="event" ng-options="e.name for e in events">
  <option value="">Select Event</option>
</select>

Now we want to make it so events that have passed do not show up. The "angular" magic that handles this happens in the custom filter you create for the app (tutorial on custom filters).

app.filter('checkDates', function() {
  return function(event) {    
    var filterEvent = [];
    for (var i = 0, length = event.length; i < length; i++){
      if (event[i].date.getTime() >= Date.now()) filterEvent.push(event[i]);
    }
    return filterEvent;
  };
});

This will filter out the array of objects being used in your model based on the logic you code. For this case, all events that are greater than today's date are added to a new array which is returned in the filter.

You then use the filter checkDates on the model you want filtered. So in ng-options define the filter you'll use (once you start using angularjs more you'll come to realize where else you can apply a filter).

<select ng-model="event" ng-options="e.name for e in events | checkDates">
  <option value="">Select Event</option>
</select>

Couple of resources on filters: what is a filter, using filters in angularjs.

Again, I highly recommend you look into external resources for AngularJS as well. And as mentioned before this is just one example of one MVC framework out there for this problem, there are definitely more options out there - but choosing an MVC framework really comes down to personal preference and I just like the power that AngularJS offers.