Question

我根据单独选择的选项动态更改8个选项中的选项。该过程处理状态中的县并更新状态中每个县的所有8个选择非常重复，因为每个选项只能存在于一个选择中。

我的原始代码很快被拼凑在一起但工作正常：

FLCounties = [
"Alachua",
"Baker",
"Bay",
"etc."];

//Get the selects
var countyDrop1 = document.getElementById("county1");
var countyDrop2 = document.getElementById("county2");
var countyDrop3 = document.getElementById("county3");
var countyDrop4 = document.getElementById("county4");
var countyDrop5 = document.getElementById("county5");
var countyDrop6 = document.getElementById("county6");
var countyDrop7 = document.getElementById("county7");
var countyDrop8 = document.getElementById("county8");

//Get the default state if any
var initialState = document.getElementById("state").value;
getState(initialState);

//Called from onchange on the state select
function getState(sel) {

//Clear previous options and add a notice to select a state
while (countyDrop1.firstChild) {
    countyDrop1.removeChild(countyDrop1.firstChild);
};
    var defaultEl1= document.createElement("option");
    defaultEl1.textContent = "Select a state above first.";
    defaultEl1.value = "";
    countyDrop1.appendChild(defaultEl1);

while (countyDrop2.firstChild) {
    countyDrop2.removeChild(countyDrop2.firstChild);
};
    var defaultEl2= document.createElement("option");
    defaultEl2.textContent = "Select a state above first.";
    defaultEl2.value = "";
    countyDrop2.appendChild(defaultEl2);

while (countyDrop3.firstChild) {
    countyDrop3.removeChild(countyDrop3.firstChild);
};
    var defaultEl3= document.createElement("option");
    defaultEl3.textContent = "Select a state above first.";
    defaultEl3.value = "";
    countyDrop3.appendChild(defaultEl3);

while (countyDrop4.firstChild) {
    countyDrop4.removeChild(countyDrop4.firstChild);
};
    var defaultEl4= document.createElement("option");
    defaultEl4.textContent = "Select a state above first.";
    defaultEl4.value = "";
    countyDrop4.appendChild(defaultEl4);

while (countyDrop5.firstChild) {
    countyDrop5.removeChild(countyDrop5.firstChild);
};
    var defaultEl5= document.createElement("option");
    defaultEl5.textContent = "Select a state above first.";
    defaultEl5.value = "";
    countyDrop5.appendChild(defaultEl5);

while (countyDrop6.firstChild) {
    countyDrop6.removeChild(countyDrop6.firstChild);
};
    var defaultEl6= document.createElement("option");
    defaultEl6.textContent = "Select a state above first.";
    defaultEl6.value = "";
    countyDrop6.appendChild(defaultEl6);

while (countyDrop7.firstChild) {
    countyDrop7.removeChild(countyDrop7.firstChild);
};
    var defaultEl7= document.createElement("option");
    defaultEl7.textContent = "Select a state above first.";
    defaultEl7.value = "";
    countyDrop7.appendChild(defaultEl7);

while (countyDrop8.firstChild) {
    countyDrop8.removeChild(countyDrop8.firstChild);
};
    var defaultEl8= document.createElement("option");
    defaultEl8.textContent = "Select a state above first.";
    defaultEl8.value = "";
    countyDrop8.appendChild(defaultEl8);

//if no state is selected, do nothing  
if (sel != ""){
    switch (sel){
        //value of option Florida
        case "FL":
            //change "select a state first" to "select a county"
            countyDrop1.firstChild.textContent = "- Select a County -";
            countyDrop2.firstChild.textContent = "- Select a County -";
            countyDrop3.firstChild.textContent = "- Select a County -";
            countyDrop4.firstChild.textContent = "- Select a County -";
            countyDrop5.firstChild.textContent = "- Select a County -";
            countyDrop6.firstChild.textContent = "- Select a County -";
            countyDrop7.firstChild.textContent = "- Select a County -";
            countyDrop8.firstChild.textContent = "- Select a County -";
            for(var i = 0; i < FLCounties.length; i++) {

                var opt = FLCounties[i];
                var el1 = document.createElement("option");
                el1.textContent = opt;
                el1.value = opt;
                var el2 = document.createElement("option");
                el2.textContent = opt;
                el2.value = opt;
                var el3 = document.createElement("option");
                el3.textContent = opt;
                el3.value = opt;
                var el4 = document.createElement("option");
                el4.textContent = opt;
                el4.value = opt;
                var el5 = document.createElement("option");
                el5.textContent = opt;
                el5.value = opt;
                var el6 = document.createElement("option");
                el6.textContent = opt;
                el6.value = opt;
                var el7 = document.createElement("option");
                el7.textContent = opt;
                el7.value = opt;
                var el8 = document.createElement("option");
                el8.textContent = opt;
                el8.value = opt;
                countyDrop1.appendChild(el1);
                countyDrop2.appendChild(el2);
                countyDrop3.appendChild(el3);
                countyDrop4.appendChild(el4);
                countyDrop5.appendChild(el5);
                countyDrop6.appendChild(el6);
                countyDrop7.appendChild(el7);
                countyDrop8.appendChild(el8);
            }
            break;
            [rinse and repeat, 49 times]

我尝试将它压缩成一系列数组和for循环，它们真正缩短了代码，但它打破了页面（我确定无处不在的循环）。

新代码（不起作用）：

var FLCounties = [
//same as above
];

var dropdowns = [
countyDrop1 = document.getElementById("county1"),
countyDrop2 = document.getElementById("county2"),
countyDrop3 = document.getElementById("county3"),
countyDrop4 = document.getElementById("county4"),
countyDrop5 = document.getElementById("county5"),
countyDrop6 = document.getElementById("county6"),
countyDrop7 = document.getElementById("county7"),
countyDrop8 = document.getElementById("county8")
];

var defaultOptions = [
defaultEl1 = document.createElement("option"),
defaultEl2 = document.createElement("option"),
defaultEl3 = document.createElement("option"),
defaultEl4 = document.createElement("option"),
defaultEl5 = document.createElement("option"),
defaultEl6 = document.createElement("option"),
defaultEl7 = document.createElement("option"),
defaultEl8 = document.createElement("option")
];

var options = [
el1 = document.createElement("option"),
el2 = document.createElement("option"),
el3 = document.createElement("option"),
el4 = document.createElement("option"),
el5 = document.createElement("option"),
el6 = document.createElement("option"),
el7 = document.createElement("option"),
el8 = document.createElement("option")
];

var initialState = document.getElementById("state").value;
getState(initialState);

function getState(sel) {
    //new clear list
    for(i=0;i<8;i++){
        while (dropdowns[i].firstChild) {
            dropdowns[i].removeChild(dropdowns[i].firstChild);
        }
        defaultOptions[i].textContent = "Select a state above first.";
        defaultOptions[i].value = "";
        dropdowns[i].appendChild(defaultOptions[i]);
    }
    if (sel != ""){
        var opt;
        switch (sel){
            case "FL":
                //new change "select a state first" to "select a county"
                for (i=0;i<8;i++){
                    dropdowns[i].firstChild.textContent = "- Select a County -";
                }
                //new create 8 unique options and add them to the selects
                for(i=0;i<FLCounties.length;i++){
                    opt = FLCounties[i];
                    for (i=0;i<8;i++){
                        options[i].textContent = opt;
                        options[i].value = opt;
                        for(i=0;i<8;i++){
                            dropdowns[i].appendChild(options[i]);
                        }
                    }
                }
            break;
        }
    }
}

我错过了什么吗？这应该更快地执行吧？而是让它无限期地加载页面。

<小时/> <小时/>

编辑：我确实发现了一个明显的问题。 dropdowns[i].appendChild(options[i]);循环不应位于其上方的循环中。它应该在设置选项后运行。

新片段：

//new create 8 unique options and add them to the selects
for(i=0;i<FLCounties.length;i++){
    opt = FLCounties[i];
    for (i=0;i<8;i++){
        options[i].textContent = opt;
        options[i].value = opt;
    }            
    for(i=0;i<8;i++){
        dropdowns[i].appendChild(options[i]);
     }
 }

<小时/> <小时/>

编辑2：

退后一步时我遇到了问题。它源于在循环中使用选项数组。我知道每个选项元素只能存在于select一次，但在编写循环时没有遵循该逻辑。相同的选项元素（options [i]）在每次迭代中被更改和重用，这些迭代不起作用，您只获得最后一次迭代的结果。我相信这在旧代码中起作用，因为它在每次迭代中重新定义了元素，而不仅仅是改变了它的属性

这是否会为此用途规定数组？

Answer 1

这不是你如何向数组中添加元素

var dropdowns = [
    countyDrop1 = document.getElementById("county1"),
    countyDrop2 = document.getElementById("county2"),
    countyDrop3 = document.getElementById("county3")
];

应该是

var dropdowns = [
    document.getElementById("county1"),
    document.getElementById("county2"),
    document.getElementById("county3")
];

然后你会这样访问

dropdown[0] // gives county1

您可能想要使用对象（请注意差异[]变为{}）

var dropdowns = {
    'county1':document.getElementById("county1"),
    'county2':document.getElementById("county2"),
    'county3':document.getElementById("county3")
};

然后您可以像这样访问

dropdown.county1

Answer 2

正如我在上面的评论中所指出的，当将选项添加到select时，我无法使用数组。 II最终使用二维数组用于县，第二个数组用于我的php脚本提交给表单的状态代码。

我意识到数组可以更好地定义为对象，但是项目的截止日期已经完成，而且这段代码对于生产使用来说足够有效。这是我最终代码的精简版本（直到事情变慢，我找时间重新访问代码）：

ALCounties = ["Autauga","Baldwin","Barbour","Bibb",etc];
AKCounties = ["Anchorage Borough","Bethel Census Area",etc];
etc

stateCountyList = [ALCounties,AKCounties,etc];

stateCode = [ "AL","AK","AZ","AR",etc];

countyDrops = [
    document.getElementById("county1"),
    document.getElementById("county2"),
    document.getElementById("county3"),
    document.getElementById("county4"),
    document.getElementById("county5"),
    document.getElementById("county6"),
    document.getElementById("county7"),
    document.getElementById("county8")
];

defaultOpts = [
    document.createElement("option"),
    document.createElement("option"),
    document.createElement("option"),
    document.createElement("option"),
    document.createElement("option"),
    document.createElement("option"),
    document.createElement("option"),
    document.createElement("option")
];

//If a user loads the page with a state previously stored in the db
var initialState = document.getElementById("state").value;
getState(initialState);

// Replaces the switch in the old code.
// Passed value of option in state select on the page, matches it to a var in stateCode, calls updateState to create a list for that state
function getState(sel) {
    clearSetFirst(" - Select a state above first. - ");
    if (sel != ""){
        var valid = false;
        for (i=0;i<stateCode.length;i++){
            if(sel == stateCode[i]){
                updateState(stateCountyList[i]);
                valid = true;
                break;
            }
        }
        if(!valid){
            clearSetFirst(" - Not available for this state. - ")
        }
    }
}

//Creates the list 
function updateState(state){
    clearSetFirst("- Select a County -");
    for(var i = 0; i < state.length; i++) {
        var opt = state[i];
        //These CANNOT be a reused array, options must be unique, so they are redecalred each iteration.
        var el1 = document.createElement("option");
        el1.textContent = opt;
        el1.value = opt;
        var el2 = document.createElement("option");
        el2.textContent = opt;
        el2.value = opt;
        var el3 = document.createElement("option");
        el3.textContent = opt;
        el3.value = opt;
        var el4 = document.createElement("option");
        el4.textContent = opt;
        el4.value = opt;
        var el5 = document.createElement("option");
        el5.textContent = opt;
        el5.value = opt;
        var el6 = document.createElement("option");
        el6.textContent = opt;
        el6.value = opt;
        var el7 = document.createElement("option");
        el7.textContent = opt;
        el7.value = opt;
        var el8 = document.createElement("option");
        el8.textContent = opt;
        el8.value = opt;
        //I thought about 
        countyDrops[0].appendChild(el1);
        countyDrops[1].appendChild(el2);
        countyDrops[2].appendChild(el3);
        countyDrops[3].appendChild(el4);
        countyDrops[4].appendChild(el5);
        countyDrops[5].appendChild(el6);
        countyDrops[6].appendChild(el7);
        countyDrops[7].appendChild(el8);
    }
}

// Clears the list if no value is selected and sets the first options text to msg 
function clearSetFirst(msg){
    for (var i=0;i<8;i++){
        if (countyDrops[i].value == "") {
            while (countyDrops[i].firstChild) {
                countyDrops[i].removeChild(countyDrops[i].firstChild);
            }
            defaultOpts[i].textContent = msg;
            defaultOpts[i].value = "";
            countyDrops[i].appendChild(defaultOpts[i]);
        }
    }
}

谢谢大家的支持。我绝对乐于接受进一步优化的建议，因为代码的大小仍为31 KB。

将重复的javascript语句转换为循环中的数组

2 个答案: