[Javascript] A Dynamic Select Solution Sought

[Philip Thompson]

On Jan 18, 2009, at 2:35 PM, tedd wrote:

> Hi gang:
>
> On the outside chance that someone is looking for something to do --
> here's a problem to consider:
>
> http://www.webbytedd.com/b/dynamic-select/
>
> The user can select up to five different time-slots to attend
> meetings -- no problem with the user's initial selection.
>
> But a problem arises because some of these time-slots overlap -- as
> such, a user can select overlapping times that make it impossible for
> them to attend two (or more) meetings at the same time.
>
> For example, if a person selects the time-slot of 7:00am-9:00am to
> attend Meeting A, then they cannot also attend Meeting B during any
> part of the chosen time-slot. That means that times 7:30am-9:30am,
> 8:00am-10:00am, and 8:30am-10:30am should not be available for them
> to select for other meetings.
>
> As an example of the solution -- I would like it such that if the
> user picks the time-slot 7:00am-9:00am in the first selection, then
> all options falling within that time-slot would be dimmed in the
> other four selections.
>
> Likewise, I would like for this solution to continue with the
> remaining selections. IOW, as the user selects time-slots, those
> options will be taken out (i.e., dimmed) from the remaining available
> time-slots.
>
> I know it can be done, but it's taking me far more time than I can
> afford at the moment. Some help would be greatly appreciated.
>
> Cheers,
>
> tedd

Hello tedd. Long time no chat.

First, you have to consider if this is for a single person or multiple  
(like a full-blown calendaring system like Outlook, blegh). If single,  
it's much more trivial (I think) than the other. Here's something I  
just popped out. I haven't tested it, but it *may* help you go in the  
right direction.......

<script type="text/javascript>
var SELECTED_OPTIONS = new Array();

function initSelects ()
{
     // Initialize the selects to respond to the onchange event
     $$('select').each(function (s) {
         s.addEvent('change', function () {
             updateSelect(this);
         });
     });
}

function updateSelect (select)
{
     // Grab the value of the currently selected option
     var value = select.getSelected().get('value');

     // If the current value is already selected, return
     if (SELECTED_OPTIONS[value]) { return; }
     SELECTED_OPTIONS[value] = true;

     $$('select').each(function (s) {
         // Loop through each select that's not the current select
         if (s != select) {
             // Loop through each of the options
             s.options.each(function (o) {
                 if (o.get('value') == value) {
                     // If the value of the current option is
                     // the selected value, remove it so it's
                     // no longer an option
                     o.dispose();
                     break;
                 }
             });
         }
     });
}
</script>

Note that this does not refill the options if you change off a  
previously selected time. So, eventually, if you keep changing, then  
you'll run out of times.

This syntax is based off the Mootools javascript library (http://mootools.net/docs/ 
). Let me know if you have any questions... I'll see what I can do.

~Philip