Fatal编程技术网
  • javascript/
  • 将重复javascript语句转换为循环中的数组

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

javascript arrays

将重复javascript语句转换为循环中的数组,javascript,arrays,out-of-memory,infinite-loop,Javascript,Arrays,Out Of Memory,Infinite Loop,我正在根据一个单独的选项动态更改8个选项中的选项。 该过程处理一个州的县，更新该州每个县的所有8个选项是非常重复的，因为每个选项只能存在于一个选择中 我的原始代码很快就拼凑起来了，但效果很好： FLCounties = [ "Alachua", "Baker", "Bay", "etc."]; //Get the selects var countyDrop1 = document.getElementById("county1"); var countyDrop2 = document.ge

我正在根据一个单独的选项动态更改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]

编辑2：

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

这是否规定了此用途的数组？

这不是向数组添加元素的方式

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

dropdown.county1
您可能希望改用对象（请注意，
[]
变成了
{}
）

然后你可以像这样访问它

dropdown[0] // gives county1

dropdown.county1
正如我在上面的评论中所指出的，在向select添加选项时，我不能使用数组。最后，我使用了一个二维数组表示县，第二个数组表示我的php脚本提交给表单的州代码

我意识到数组应该更好地定义为对象，但是项目的截止日期已经到了，并且该代码对于生产使用来说足够有效。以下是我最终代码的浓缩版本（直到事情进展缓慢，我有时间重新审视代码）：

ALCounties=[“奥托加”、“鲍德温”、“巴伯”、“比伯”等]；
AkCountries=[“安克雷奇区”、“贝瑟尔普查区”等]；
等
stateCountyList=[ALCounties、AKCounties等]；
州代码=[“AL”、“AK”、“AZ”、“AR”等]；
counthydrops=[
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（“选项”），
document.createElement（“选项”），
document.createElement（“选项”），
document.createElement（“选项”），
document.createElement（“选项”），
document.createElement（“选项”），
document.createElement（“选项”），
document.createElement（“选项”）
];
//如果用户加载具有先前存储在数据库中的状态的页面
var initialState=document.getElementById（“state”）.value；
getState（initialState）；
//替换旧代码中的开关。
//在页上的状态选择中传递选项的值，将其与状态代码中的变量匹配，调用UpdateEstate为该状态创建列表
函数getState（sel）{
clearSetFirst（“-选择高于第一个的状态。-”）；
如果（sel！=“”）{
var-valid=false；

对于（i=0；i首先要注意的是：
var options=[el1=document.createElement（“option”），
可能没有按照您认为的那样做。如果您想要关联数组aka对象或散列：
var options={el1:document.createElement（“options”），…
是有效的语法，我想他只是在创建一堆全局变量。当您指定数组时，我也会删除重复的代码。例如，
（var i=1；i）但用户似乎能够正确执行它。正如他所说，我的原始代码很快就拼凑起来了，但工作正常：我想我需要先声明它们，然后再将它们添加到数组中。对吗？这不是你在中回答问题的方式，所以：P你能不能在数组的define中定义它们？@thefourtheye acci点击“添加注释”按钮。请参阅更新的答案。我取出了变量名，因为我不需要它们。脚本仍然保留页面，不进行渲染。这里的对象有什么优势吗？除了能够按名称引用对象中的变量之外。

dropdown.county1



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]);
        }
    }
}