jQuery多个Dropdown

Question

我希望找到一种同步多个下拉菜单的好方法。我已经看到代码执行了两次下拉，但我需要它跨越3或更多。是否有一种优雅的方式来做到这一点。下面的代码不适用于三个下拉菜单（只有两个），但这是我能找到的最接近的例子。

我正在尝试这样做，以便如果任何下拉更改，该下拉列表中的所选选项在其他下拉列表中不再可用。

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');
});