Question

我目前正在运行一个页面，需要一个下拉菜单和三个单选按钮供用户选择。每次用户更改其选择时，将根据其选择显示div，同时隐藏所有其他div。我当前的JavaScript工作，但它是一个巨大的，可能是低效的混乱。

EX：

function enrollmentChange() {
            var enrollmentChoice = document.getElementById("enrollmentChoice");
            if (document.getElementById("onC").checked) {
                if (enrollmentChoice.options[enrollmentChoice.selectedIndex].text === "Please select enrollment status") {
                    document.getElementById("full-timeOn").style.display = "none";
                    document.getElementById("three-quarter-timeOn").style.display = "none";
                    document.getElementById("half-timeOn").style.display = "none";
                    document.getElementById("less-than-half-timeOn").style.display = "none";
                    document.getElementById("full-timeOff").style.display = "none";
                    document.getElementById("three-quarter-timeOff").style.display = "none";
                    document.getElementById("half-timeOff").style.display = "none";
                    document.getElementById("less-than-half-timeOff").style.display = "none";
                    document.getElementById("full-timeComm").style.display = "none";
                    document.getElementById("three-quarter-timeComm").style.display = "none";
                    document.getElementById("half-timeComm").style.display = "none";
                    document.getElementById("less-than-half-timeComm").style.display = "none";
                }

你可以在http://jsfiddle.net/5h3kL/2/看到这一切。

有没有办法让我把它压缩成某种类型的循环？我玩了几个循环，但我不确定如何让循环考虑单选按钮选择和下拉菜单选择。

Answer 1

我认为这可能会缩短一些事情：

function enrollmentChange() {
    var id = document.getElementById, // short hand
        choice = id("enrollmentChoice").options[id("enrollmentChoice").selectedIndex].text,
        which = id("onC").checked ? "On" :
                id("offC").checked ? "Off" :
                id("comm").checked ? "Comm" : "";

    if (which !== "") {
        ["On", "Off", "Comm"].forEach(function(w) {
            id("full-time" + w).style.display = "none";
            id("three-quarter-time" + w).style.display = "none";
            id("half-time" + w).style.display = "none";
            id("less-than-half-time" + w).style.display = "none";
        });

        if (choice === "Full Time (12 or More Credit Hours)") {
            id("full-time" + which).style.display = "block";
        } else if (choice === "Three-Quarter Time (9-11 Credit Hours)") {
            id("three-quarter-time" + which).style.display = "block";
        } else if (choice === "Half Time (6-8 Credit Hours)") {
            id("half-time" + which).style.display = "block";
        } else {
            id("less-than-half-time" + which).style.display = "block";
        }
    }
}

Answer 2

你可以这样做：

var enrollmentChoice = document.getElementById("enrollmentChoice");
var arraymap = ['Please select enrollment status',''],
               ['Full Time (12 or More Credit Hours)','three-quarter-timeOn'],
               ['Half Time (6-8 Credit Hours)','half-timeOn'] ... ;
var inputs = document.getElementsByTagName('input');

for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'radio') {
        for(var ii=0;ii<arraymap.length;ii++){
           if(arraymap[ii][0] == enrollmentChoice.options[enrollmentChoice.selectedIndex].text && arraymap[ii][1] == inputs[i].id){
              inputs[i].style.display = 'block';
           }else{
              inputs[i].style.display = 'none'; 
           }
        }
    }
}

创建一个考虑单选按钮和下拉菜单的显示/隐藏循环

2 个答案: