添加第三个动态下拉菜单

Adding 3rd Dynamic drop down menu

本文关键字：三个 动态 下拉菜单 添加      更新时间：2023-09-26

我已经有了适用于2个选择菜单的代码，现在我正在尝试添加第三个，但第三个只是显示所有子类别，而不是基于以前的选择。。

这是菜单代码，我只展示一个选择示例，这样更容易阅读。

<select name="category" id="category">
  <option value="Sport">Sport</option>
</select>
<select name="sub_category" id="sub_category">
  <option value="Golf" class="Sport">Golf</option>
</select>
<select name="subsub_category" id="subsub_category">
  <option value="Mens" class="Golf">Mens</option>
  <option value="Ladies" class="Golf">Ladies</option>
</select>

JS代码

<script src="js/menu.js"></script>
<script type="text/javascript">
    window.onload = function() {
        dynamicSelect("category", "sub_category", "subsub_category");
    }
    </script>

MENU.JS

function dynamicSelect(id1, id2, id3) {
// Browser and feature tests to see if there is enough W3C DOM support
var agt = navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_mac = (agt.indexOf("mac") != -1);
if (!(is_ie && is_mac) && document.getElementById && document.getElementsByTagName) {
    // Obtain references to both select boxes
    var sel1 = document.getElementById(id1);
    var sel2 = document.getElementById(id2);
    var sel3 = document.getElementById(id3);
    // Clone the dynamic select box
    var clone = sel3.cloneNode(true);
    // Obtain references to all cloned options 
    var clonedOptions = clone.getElementsByTagName("option");
    // Onload init: call a generic function to display the related options in the dynamic select box
    refreshDynamicSelectOptions(sel1, sel2, sel3, clonedOptions);
    // Onchange of the main select box: call a generic function to display the related options in the dynamic select box
    sel1.onchange = function() {
        refreshDynamicSelectOptions(sel1, sel2, sel3, clonedOptions);
    };
}
}
function refreshDynamicSelectOptions(sel1, sel2, sel3 clonedOptions) {
// Delete all options of the dynamic select box
while (sel2.options.length) {
    sel2.remove(0);
}
// Create regular expression objects for "select" and the value of the selected   option of the main select box as class names
var pattern1 = /( |^)(select)( |$)/;
var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")(  |$)");
var pattern3 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
// Iterate through all cloned options
for (var i = 0; i < clonedOptions.length; i++) {
    // If the classname of a cloned option either equals "select" or equals  the value of the selected option of the main select box
    if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)  || clonedOptions[i].className.match(pattern3))     {
        // Clone the option from the hidden option pool and append it to the dynamic select box
        sel2.appendChild(clonedOptions[i].cloneNode(true));
        sel3.appendChild(clonedOptions[i].cloneNode(true));
    }
}
}

编辑：为了让它工作，需要做很多更改，但现在它正在工作，在这里：http://jsfiddle.net/kvAWf/11/

以下是生成的Javascript：

var sel1 = document.getElementById('category');
var sel2 = document.getElementById('sub_category');
var sel3 = document.getElementById('subsub_category');
// Clone the dynamic select box
var clone2 = sel2.cloneNode(true);
var clone3 = sel3.cloneNode(true);
// Obtain references to all cloned options 
var clonedOptions2 = clone2.getElementsByTagName("option");
var clonedOptions3 = clone3.getElementsByTagName("option");
sel1.onchange = function(){
    refreshSelect2();
}
sel2.onchange = function(){
    refreshSelect3();
}
function refreshSelect2() {
    while (sel2.options.length) {
        sel2.remove(0);
    }
    var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
    for (var i = 0; i < clonedOptions2.length; i++) {
        // If the classname of a cloned option either equals "select" or equals  the value of the selected option of the main select box
        if (clonedOptions2[i].className.match(pattern2))     {
            // Clone the option from the hidden option pool and append it to the dynamic select box
            sel2.appendChild(clonedOptions2[i].cloneNode(true));
        }
    }
    refreshSelect3();
}

function refreshSelect3() { 
    while (sel3.options.length) {
        sel3.remove(0);
    }
    var pattern3 = new RegExp("( |^)(" + sel2.options[sel2.selectedIndex].value + ")( |$)");
    for (var i = 0; i < clonedOptions3.length; i++) {
        // If the classname of a cloned option either equals "select" or equals  the value of the selected option of the main select box
        if (clonedOptions3[i].className.match(pattern3))     {
            // Clone the option from the hidden option pool and append it to the dynamic select box
            sel3.appendChild(clonedOptions3[i].cloneNode(true));
        }
    }
}
相关文章：