我有一个SELECT元素,我需要根据在文本字段中输入的邮政编码的前半部分自动选择适当的选项。英国邮政编码的格式为 AB12 3CD ,其中第一部分由1-2个代表县的字母和代表县内区域的数字组成。最后3个字符与此问题无关。
对于大多数字段,它仅基于第一个字母,但对于某些选项,它是邮政编码范围。 HTML应该最好地解释它:
<select id="country_field">
<option value="">Select</option>
<option value="AB">AB (Aberdeen)</option>
<option value="AL">AL (St. Albans)</option>
<option value="B">B (Birmingham)</option>
<option value="BA">BA (Bath)</option>
...
<option value="DD1">DD 1-7 (Dundee)</option>
<option value="DD8">DD 8-11 (Dundee)</option>
...
</select>
当下面的代码恰好是两个字母时,我的代码当前会选择正确的元素。但我需要扩展它以包含单字母代码(伯明翰)和邮政编码范围(邓迪)。注意:如果有一个保证特殊值的解决方案,我可以更改选项值,例如: DD1 / DD2代替DD1 / DD8。
简而言之:
这是我到目前为止的Javascript ...
window.onload = function()
{
// postcode INPUT field
var zipInput = document.getElementById( 'zip_field' );
// county SELECT field
var ctySelect = document.getElementById( 'county_field' );
zipInput.onchange = function()
{
var zipValue = zipInput.value;
var ctyOptions = ctySelect.options;
for ( i = 0; i < ctyOptions.length; i++ )
{
if ( zipValue.substring(0,2) == ctyOptions[i].value )
ctyOptions[i].selected = true;
}
}
}
答案 0 :(得分:1)
您可以使用正则表达式来提取值...
/^([a-z]{1,2})(\d*)\s/i
然后,对于像DD这样的范围的代码,可能是这样的(伪代码)......
if(match[1].value == "DD") { // needs special processing
range = match[2].value;
range = range < 8 ? 1 : 8; // if the number is less than 8, set it to 1, otherwise set it to 8
listValue = match[1].value + range
} else // just use the letters to select the list item
listValue = match[1].value;
因此,对于DD5
,这将返回DD1
,对于DD11
,它将返回DD8
。 B2
或BA3
之类的内容只会分别返回B
和BA
。
如果您有多个不同范围的其他代码,则可以将if
更改为switch
。然后,只需将该值设置为当前选择的列表项。
答案 1 :(得分:0)
替换:
zipInput.onchange = function()
{
var zipValue = zipInput.value;
var ctyOptions = ctySelect.options;
for ( i = 0; i < ctyOptions.length; i++ )
{
if ( zipValue.substring(0,2) == ctyOptions[i].value )
ctyOptions[i].selected = true;
}
}
使用:
zipInput.onchange = function()
{
var zipValue = zipInput.value.match(/^[a-z]+/gi);
var ctyOptions = ctySelect.options;
for ( i = 0; i < ctyOptions.length; i++ )
{
if (zipValue[0] === ctyOptions[i].value )
ctyOptions[i].selected = true;
}
}
答案 2 :(得分:0)
您可以将zipValue的开头与选项值进行比较。不需要正则表达式。只需使用indexOf。
zipInput.onchange = function()
{
var zipValue = zipInput.value.toUpperCase();
var ctyOptions = ctySelect.options;
for ( i = 0; i < ctyOptions.length; i++ )
{
if ( zipValue.indexOf(ctyOptions[i].value) == 0 )
ctyOptions[i].selected = true;
}
}
答案 3 :(得分:0)
我不确定这在javascript中是如何工作的,但我会做类似以下的事情:
那么,“B”变成“^ B [0-9]”(我假设它必须跟一个数字)
BA成为“^ BA [0-9]”
DD1变为“^ DD([1-7])”
DD8变为“^ DD([8-9] | [1] [01])”以匹配DD8,DD9,DD10,DD11
然后只需对你的字符串运行正则表达式(不需要将其子串,因为^确保匹配发生在字符串的开头)并检查是否有成功的匹配。