Question

这看起来似乎是一种蠢蠢欲动的做事方式，但我正在试验这个。

我有一份英国县名单和一份美国州名单。当用户选择＆＃34; UK＆＃34;或＆＃34;美国＆＃34;从下拉列表中，它重新填充第二个选择列表。（我通过每次更改选择选项时提交表单并重建HTML表单来实现此工作......但实现这是一种服务器密集型模式，所以现在想通过Javascript实现）

我首先将文本文件读入javascript数组，（实际上，PERL脚本读取文件，将其转换为代码，然后输出HTML）所以我最终得到：

var state_opt = new Array('1','2','3','4',' ...
var state_title = new Array('Alabama','Alaska','Arizona','Arkansas' ...

然后我使用循环加载第二个数组：

for (x=0; x<state_opt.length; x++){
document.userChoice.c_s.options[x]=new Option(state_title[x],state_opt[x])
}

工作正常......直到我尝试第二个具有＆lt; optgroup＆gt;＆lt; / optgroup＆gt;的数组上面的循环自动使它们成为选项!!这是阵列：

var county_opt = new Array('-','2','3','4', ...
var county_title = new Array('<optgroup label="England">','Bedfordshire','Berkshire','Bristol' ...

**注意我已经制作了＆lt; optgroup＆gt;价值进入＆＃34; - ＆＃34;所以它可以区分。（在PERL中写作时，这是我使用的概念：

If ($county_opt[$x] eq "-"){
$option.=$county_title[$x];
}
else{
$option.="<option value=\"$county_opt[$x]\">$country_title[$x]";
}

然后写＆＃34;＆lt; select＆gt; $ option＆lt; / select＆gt;

所以我想要的是这样的代码：

for (x=0; x<county_opt.length; x++){
        var str=county_title[x];
            if (str.match(/optgroup/g)){ 
        // ??   document.userChoice.c_s.options[x]=county_title[x];
        // ie print the value as is without making it into an option
            }
            else{
            document.userChoice.c_s.options[x]=new Option(county_title[x],county_opt[x])
            }
        }

任何简单的想法？如果无法完成，我只需要删除标签

Answer 1

嗯......这是一个具有挑战性的＆＃39;早上！部分解决方案可能在技术上是错误的......但它确实有效。

我找到了一种方法来添加标签而不将它们变成可选择的选项，但因为它们不是选项，当更改为其他选项列表时，我无法删除这些＆lt; optgroup＆gt;标签通过使用删除选项元素的循环!! （这有意义吗？）

相反，我最终做的原始方法是使用innerHTML在＆lt; select＆gt;中设置文本。表单选项为null。然后我（错误地？）创建了一个用≤optgroup＆gt;＆lt; option＆gt;构建的字符串。标签和值，并使用innerHTML再次替换它

＆＃34; ind2＆＃34;其他选项是替换所有选项字段的（正确）方法。

希望这有助于某人。

顺便提一下，您还会注意到＆＃34; Not Available＆＃34;具有＆＃34; - ＆＃34;的值。很简单，如果用户选择此选项，则错误陷阱例程会看到这些值，并只返回带有false值的表单。

function checkCountry(){
document.userChoice.c_s.innerHTML=''
var ind=document.userChoice.countryChoice.selectedIndex;   
// set 1 for UK, 2 for US
//'Please select a Country' has an option value of '0'

    if (ind == 0){  // resets 2nd / 3rd option list if don't select US or UK 
    document.userChoice.c_s.options[0]=new Option("NOT AVAILABLE","-");
    document.userChoice.service.options[0]=new Option("NOT AVAILABLE","-");
    }

    if (ind == 1){
    var t='<option value="-">Please select a County</option>';
    for (x=0; x<county_opt.length; x++){
    var str=county_opt[x];
        if (str.match(/-/)){ 
        t+=county_title[x]; // Sets the <optgroup> tag with no option value
        }
        else{
        t+='<option value="'+county_opt[x]+'">'+county_title[x];
        }
    }
    document.userChoice.c_s.innerHTML=t;
    }

    if (ind == 2){   // preferred method that won't remove <optgroup> from <select> area
    document.userChoice.c_s.options[0]=new Option('Please select a State','-');
        for (x=1; x<state_opt.length; x++){
        document.userChoice.c_s.options[x]=new Option(state_title[x],state_opt[x])
        }
    }
}
</script>

从javascript数组</optgroup>动态添加<optgroup>

1 个答案: