0

テキスト フィールドに入力された郵便番号の前半に基づいて、適切なオプションを自動選択する必要がある 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>

以下の私のコードは現在、値が正確に 2 文字の場合に正しい要素を選択します。ただし、1 文字のコード (バーミンガム) と郵便番号の範囲 (ダンディー) を含むように拡張する必要があります。注: DD1/DD8 の代わりに DD1/DD2 など、特別な値を保証するソリューションがあれば、オプションの値を変更できます。

要するに：

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

4 に答える 4

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;

したがって、 for DD5、 this が返さDD1れ、 for DD11it が返されDD8ます。B2またはのようなものは、それぞれBA3単にBおよびを返しBAます。

異なる範囲の他のコードが複数ある場合は、ifを a に変更できます。switch次に、その値を持つリスト項目を現在の選択として設定します。

于 2009-05-14T19:00:21.327 に答える
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;
    }
  }
  1. まず、ループから変数割り当てアクションを削除しました。同じ操作を繰り返してサイクルを無駄にするのはなぜですか?
  2. 2 番目に、入力の先頭にある文字以外のすべてを除外します。
  3. これは、数字の接尾辞などを含めるように拡張できます。
于 2009-05-14T19:00:04.947 に答える
0

これがjavascriptでどのように機能するかはわかりませんが、次のようなことをします：

  • 探しているものと一致する正規表現になるように値を設定します

したがって、「B」は「^B[0-9]」になります（その後に数字が続く必要があると想定しています）

BA は「^BA[0-9]」になります。

DD1 は "^DD([1-7] )" になります。

DD8 は "^DD([8-9] |[1][01] )" になり、DD8、DD9、DD10、DD11 に一致します。

次に、文字列に対して正規表現を実行するだけです（^は、この一致が文字列の先頭で発生することを確認するため、部分文字列にする必要はありません）。一致が成功したかどうかを確認します。

于 2009-05-14T19:34:32.023 に答える