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

【问题标题】：Creating a Show/Hide Loop that Considers Radio Buttons and a Drop-down Menu创建考虑单选按钮和下拉菜单的显示/隐藏循环
【发布时间】：2014-07-01 14:53:07
【问题描述】：

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

前：

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/看到这一切。

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

【问题讨论】：

请把你的html放在小提琴上。
好的，已经在主帖中更新了。这是链接jsfiddle.net/5h3kL/2。它在小提琴中不起作用，但在现场可以正常工作。
codereview.stackexchange.com

标签： javascript drop-down-menu radio-button hide show

【解决方案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";
        }
    }
}

【讨论】：

【解决方案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'; 
           }
        }
    }
}

【讨论】：