我有一个不是很优雅的代码块,它应该是一个多级/级联菜单:你最初只看到第一个选择;如果选择第4项,则打开第2项,依此类推。当您更改之前的选择时,它必须相应地显示其他选项(即隐藏其他选项)。
该代码适用于Chrome;但是使用Firefox和Internet Explorer,当你打开所有4选择然后你改变第一个,而不是关闭(隐藏和禁用)第2,第3和第4选择,它只是关闭第2,而不是触发更改事件
这里是代码(需要原型):
<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]