原型级联选择与 Firefox 和 Internet Explorer 的兼容性

Question

我有这个不太优雅的代码块，它应该是一个多级/级联菜单：您最初只看到第一个选择；如果您选择第四个项目，它将打开第二个选择，依此类推。当您更改以前的选择时，它必须相应地显示其他选择（即隐藏其他选择）。

该代码在 Chrome 上运行得很好；但是使用 Firefox 和 Internet Explorer，当您打开所有 4 个选择，然后更改第一个选择时，它不会关闭（隐藏和禁用）第二个、第三个和第四个选择，而是简单地关闭第二个选择，而不触发更改事件。

这里是代码（需要原型）：

<form action="" method="post" id="product_addtocart_form" enctype="multipart/form-data">
<dl class="last">
  <div id="opt_76">
    <dt>
      <label>76</label>
    </dt>
    <dd>
      <div class="input-box">
        <select name="options[76]" id="select_76" class=" product-custom-option" title="">
          <option value="">-- Choose --</option>
          <option value="88" price="0">88</option>
          <option value="89" price="0">89</option>
          <option value="90" price="0">90</option>
        </select>
      </div>
    </dd>
  </div>
  <div class="hidden" id="opt_75">
    <dt>
      <label>75</label>
    </dt>
    <dd>
      <div class="input-box">
        <select disabled="disabled" name="options[75]" id="select_75" class=" product-custom-option" title="">
          <option value="">-- Choose --</option>
          <option value="85" price="0">85</option>
          <option value="86" price="0">86</option>
          <option value="87" price="0">87</option>
        </select>
      </div>
    </dd>
  </div>
  <div class="" id="opt_74">
    <dt>
      <label>74</label>
    </dt>
    <dd>
      <div class="input-box">
        <select name="options[74]" id="select_74" class=" product-custom-option" title="">
          <option value="">-- Choose --</option>
          <option value="82" price="0">82</option>
          <option value="83" price="0">83</option>
          <option value="84" price="0">84</option>
        </select>
      </div>
    </dd>
  </div>
  <div class="" id="opt_73">
    <dt>
      <label>73</label>
    </dt>
    <dd>
      <div class="input-box">
        <select name="options[73]" id="select_73" class=" product-custom-option" title=""d>
          <option value="">-- Choose --</option>
          <option value="79" price="0">79</option>
          <option value="80" price="0">80</option>
          <option value="81" price="0">81</option>
        </select>
      </div>
    </dd>
  </div>
</dl>

[script]
function fireEvent(element,event){
    // ref.: http://jehiah.cz/a/firing-javascript-events-properly
    if (document.createEventObject){
    // dispatch for IE
    var evt = document.createEventObject();
    return element.fireEvent('on'+event,evt)
    }
    else{
    // dispatch for firefox + others
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent(event, true, true ); // event type,bubbling,cancelable
    return !element.dispatchEvent(evt);
    }
}

function _recurseChildren(element, bDisable)
{
    for (var i = 0; i < element.childNodes.length; i++)
    {
        var e = element.childNodes[i];
        if (e.tagName) switch (e.tagName.toLowerCase())
        {
            case 'select':
                e.disabled = bDisable;
                e.selectedIndex = bDisable ? -1 : 0;
                if (e.onchange) e.onchange();
                fireEvent(e,'change');
            break;
            default:
                if (e.hasChildNodes())  
                    _recurseChildren(e, bDisable);
        }
    }
}

function showOpt(elementId, bShow)
{
    e = $(elementId);
    if (bShow)
        Element.removeClassName(e, "hidden");
    else 
        Element.addClassName(e, "hidden");
    _recurseChildren(e, !bShow);
}

if ($F('select_76') != '90' || $F('select_76') != '89')
{
    showOpt('opt_75', false);
}   
if ($F('select_75') != '87')
{
    showOpt('opt_74', false);
}
if ($F('select_74') != '84')
{
    showOpt('opt_73', false);
}

if ($('select_76'))
{                               
    Event.observe($('select_76'),'change',function(){
      var value = $F('select_76');
      if ( value == '90' || value == '89' ||  1==0 ) {
        showOpt('opt_75', true);
      } else {
         showOpt('opt_75', false);
      }
    });
    fireEvent($('select_76'),'change');
}
if ($('select_75'))
{                               
    Event.observe($('select_75'),'change',function(){
      var value = $F('select_75');
      if ( value == '87' ||  1==0 ) {
        showOpt('opt_74', true);
      } else {
         showOpt('opt_74', false);
      }
    });
    fireEvent($('select_75'),'change');
}
if ($('select_74'))
{                               
    Event.observe($('select_74'),'change',function(){
      var value = $F('select_74');
      if ( value == '84' ||  1==0 ) {
        showOpt('opt_73', true);
      } else {
         showOpt('opt_73', false);
      }
    });
    fireEvent($('select_74'),'change');
}
[script]