Javascript 自动选择<；选项>；基于输入字段，有一些注意事项

我有一个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>

挑选
AB（香港仔）
AL（圣奥尔本斯）
B（伯明翰）
文学士（浴室）
...
DD 1-7（邓迪）
DD 8-11（邓迪）
...

当值正好是两个字母时，我下面的代码当前将选择正确的元素。但我需要将其扩展到单字母代码（伯明翰）和邮政编码范围（邓迪）。注意：如果有一个解决方案保证特殊值，例如DD1/DD2而不是DD1/DD8，我可以更改选项值

简言之：

• B2-->伯明翰
• BA3-->镀液
• DD5-->第一个邓迪[DD1]
• DD11-->第二个邓迪[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;
    }
  }
}

window.onload=function（）
{
//邮政编码输入字段
var zipInput=document.getElementById（'zip_字段'）；
//县选择字段
var ctySelect=document.getElementById（'country_field'）；
zipInput.onchange=函数（）
{
var zipValue=zipInput.value；
var ctyOptions=ctySelect.options；
对于（i=0；i

更换：

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；
var ctyOptions=ctySelect.options；
对于（i=0；i

与：

zipInput.onchange=function（）
{
var zipValue=zipInput.value.match（/^[a-z]+/gi）；
var ctyOptions=ctySelect.options；
对于（i=0；i

首先，我们将变量赋值操作从循环中移除。为什么废物循环重复相同的操作

第二，我们现在过滤掉除了输入开头的字母以外的所有内容

这又可以扩展为包括数字后缀等

---

您可以使用正则表达式提取值

/^([a-z]{1,2})(\d*)\s/i

然后，对于像DD这样的范围的代码，可能是这样的（伪代码）

if（匹配[1]。value==“DD”）{//需要特殊处理
范围=匹配[2]。值；
range=range<8？1:8；//如果数字小于8，则将其设置为1，否则将其设置为8
listValue=匹配[1]。值+范围
}else//只需使用字母选择列表项即可
listValue=匹配[1]。值；

因此，对于

DD5

，它将返回

DD1

，对于

DD11

它将返回

DD8

。类似于

B2

或

BA3

的内容将分别返回

B

和

BA

---

如果有多个不同范围的其他代码，则可以将

if

更改为

开关。然后，只需将具有该值的列表项设置为当前选择。
您可以将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;
    }
  }

zipInput.onchange=function（）
{
var zipValue=zipInput.value.toUpperCase（）；
var ctyOptions=ctySelect.options；
对于（i=0；i
我不确定这在javascript中是如何工作的，但我会做如下操作：


将您的值设置为正则表达式，以匹配您要查找的内容

因此，“B”变成“^B[0-9]”（我假设后面必须跟一个数字）

BA变为“^BA[0-9]”

DD1变为“^DD（[1-7]）”

DD8变成“^DD（[8-9]|[1][01]），以匹配DD8、DD9、DD10、DD11

然后对字符串运行正则表达式（无需子字符串，因为“^确保此匹配发生在字符串的开头），然后检查是否有成功的匹配。
我不知道我怎么没有想到这一点。最直截了当的解决方案，呵呵。我不知道这是如何处理DD5条目将选择值为DD1的列表项的情况。我认为他对一个区域内的每个地区都有一个选项。虽然我可能错了。我可能误解了，但从以下问题来看：#DD5-->第一个邓迪[DD1]，#DD11-->第二个邓迪[DD8]。在任何情况下，他都会说“如果有一个解决方案需要特殊值，我可以更改选项值，例如，DD1/DD2而不是DD1/DD8。”别忘了将var关键字放在“I=0”前面所以你不会用i变量污染全局范围。我认为这非常接近完美。我会试试看，然后回来汇报。
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;

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