自動選擇 <option>根據輸入字段，有一些警告

Question

我有一個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，我可以更改選項值。

簡而言之：

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

Answer 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 。 然后，僅將具有該值的列表項設置為當前選擇。

Answer 2

更換：

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

1. 首先，我們從循環中刪除了變量assign動作。 為什么浪費循環重復相同的操作？
2. 第二，我們現在過濾掉輸入開頭的字母以外的所有內容。
3. 依次可以將其擴展為包括數字后綴等。

Answer 3

您可以將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;
    }
  }

Answer 4

我不確定這在javascript中如何工作，但是我會做如下的事情：

• 將您的值設置為正則表達式以匹配您要查找的內容

因此，“ B”變成“ ^ B [0-9]”（我假設它后面必須有一個數字）

BA變成“ ^ BA [0-9]”

DD1變為“ ^ DD（[1-7]）”

DD8變為“ ^ DD（[8-9] | [1] [01]）”以匹配DD8，DD9，DD10，DD11

然后只需對您的字符串運行正則表達式（無需對它進行子字符串化，因為^可確保此匹配項發生在字符串的開頭）並檢查是否存在成功的匹配項。