jQuery multiple Dropdowns

I am looking to find a good way to synchronise multiple drop downs. I have seen code that does it for two drop downs but I need it to work across 3 or more. Is there an elegant way to do this. The code below does not work for three drop downs (only two) but is the closest example I could find.

I am trying to make it so that if any of the drop downs changes that selected option in that drop down is no longer available in the other drop downs.

HTML
<!-- 1st DropDown: -->
    <select name="d1" id="d1">
        <option>---</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

<!-- 2nd DropDown: -->
    <select name="d2" id="d2">
        <option>---</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

<!-- 3nd DropDown: -->
    <select name="d3" id="d3">
        <option>---</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
JavaScript
$('#d1').change(function(e) {
   index = $(this).prop('selectedIndex');
   $('#d2 option:eq(' + index + ')').css('display','none').siblings()
                                    .css('display','block');

   $('#d3 option:eq(' + index + ')').css('display','none').siblings()
                                    .css('display','block');
});

$('#d2').change(function(e) {
  index = $(this).prop('selectedIndex');
  $('#d1 option:eq(' + index + ')').css('display','none').siblings()
                                   .css('display','block');

  $('#d3 option:eq(' + index + ')').css('display','none').siblings()
                                   .css('display','block');
});

$('#d3').change(function(e) {
  index = $(this).prop('selectedIndex');
  $('#d1 option:eq(' + index + ')').css('display','none').siblings()
                                   .css('display','block');

  $('#d2 option:eq(' + index + ')').css('display','none').siblings()
                                   .css('display','block');
});

Answers


Need Your Help

Why can't I run a c# console application in debug mode? (MonoDevelop Issue?)

c# mono ide monodevelop

Apologies if this is not the right place but I'm tearing my hair out here..

What is the difference between an Interop and a RCW (Runtime Callable Wrapper)?

.net interop terminology rcw ccw

What is the difference between an Interop and a RCW (Runtime Callable Wrapper)?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.