the Forum

Creating two non-duplicating SELECT fields

Posted on January 18, 2012 by Michael Rosario
Total Posts: 33 | Join date: 03-12-11

A client needed a registration form that entails a SELECT form for possible tour dates. A user will need to select a date and an alternate date. I wanted a function that would disable the dates on the other SELECT to avoid duplications. Here is my possible solution using jQuery. So first the two select fields:

<select name="tourdate" class="TourDate">
   <option>Date 1</option>
   <option>Date 2</option>
   <option>Date 3</option>
</select>

<select name="tour alt" class="TourAlt">
   <option>Date 1</option>
   <option>Date 2</option>
   <option>Date 3</option>
</select> 

On my header I have the following:

<script>
$(document).ready( function(){
 var item1 = "";
 var item2 = "";

$('.TourDate').change(function() {
 item1 = $("select[name='tourdate'] option:selected").text();
 $("select[name='touralt'] option").each(function () {
  if(item1 == $(this).text()){  
   $(this).attr("disabled","disabled");
  } else {   
   $(this).removeAttr("disabled");  
  };
 });
});

$('.TourAlt').change(function() {
 item2 = $("select[name='touralt'] option:selected").text();
 $("select[name='tourdate'] option").each(function () {
  if(item2 == $(this).text()){  
   $(this).attr("disabled","disabled");  
  } else {   
   $(this).removeAttr("disabled");  
  };
 });
 });
});
</script>] 

I'm sure there are many ways to do this, this is just my way. The code basically disables the selected date on the other SELECT field and vice versa.

Tags: There are no tags for this entry.

There are no answers yet. Add yours below.

add your answers here

comments powered by Disqus

Amazon.com Widgets

the Forum

Creating two non-duplicating SELECT fields

There are no answers yet. Add yours below.

add your answers here

Trending Threads

Tags