Auto-Auswahl von basierend auf Eingabefeld, mit einigen Einschränkungen

Question

Ich habe ein SELECT-Element, in dem ich brauche, um die entsprechende Option Auto-Auswahl auf der Grundlage der ersten Hälfte einer Postleitzahl in einem Textfeld eingegeben. Britische Postleitzahlen sind von der Form AB12 3CD , wobei der erste Abschnitt besteht aus 1-2 Buchstaben für die Kreis- und eine Zahl für den Bereich innerhalb der Region. Die letzten drei Zeichen sind nicht relevant für diese Frage.

Für die meisten der Felder, die es nur auf den ersten Buchstaben basiert (s), aber für einige Optionen ist es ein Postleitzahlenbereich. Der HTML-Code sollte es erklärt am besten kann:

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

finden Sie unten Mein Code wird zur Zeit das richtige Element wählen, wenn der Wert genau zwei Buchstaben ist. Aber ich brauche um es zu erweitern, um den Ein-Buchstaben-Codes (Birmingham) und die Postleitzahl Bereiche (Dundee) zu umfassen. Hinweis: Ich kann den Optionswert ändern, wenn es eine Lösung gibt, die speziellen Wert gewährleistet, zum Beispiel DD1 / DD2 statt DD1 / DD8.

Kurz gesagt:

• B2 -> Birmingham
• BA3 -> Bad
• DD5 -> erster Dundee [DD1]
• DD11 -> zweiter Dundee [DD8]

Hier ist die Javascript Ich habe so weit ...

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

Sie können einen regulären Ausdruck verwenden, um die Werte herausziehen ...

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

Dann werden für einen Code mit einer Reihe wie DD, vielleicht so etwas wie dieser (Pseudo-Code) ...

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;

Also, für DD5, wird dies DD1 zurückkehren und für DD11 wird es zurückkehren DD8. So etwas wie B2 oder BA3 einfach zurückgeben B und BA ist.

Sie können die if zu einem switch ändern, wenn Sie mehrere anderen Codes mit unterschiedlichen Bereichen haben. Setzen Sie dann nur den Listeneintrag mit diesem Wert als die aktuelle Auswahl.

Answer 2

Ersetzen Sie:

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

Mit:

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. Zunächst einmal removeed wir die Variable assign Aktion aus der Schleife. Warum Abfallzyklen den gleichen Vorgang wiederholen?
2. Nummer zwei, filtern wir jetzt alles ausser den Buchstaben am Anfang des Eingangs.
3. Dies kann wiederum erweitert werden, um die Anzahl Suffixe enthalten, etc.

Answer 3

Sie können den Beginn des zipValue mit den Optionen Werten vergleichen. Keine Notwendigkeit für reguläre Ausdrücke. verwenden indexOf einfach.

  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

Ich bin mir nicht sicher, wie dies in Javascript funktionieren würde, aber ich würde etwas tun, wie folgt aus:

• Ihre Werte Richten Sie reguläre Ausdrücke sein zu entsprechen, was Sie suchen

So dann, "B", wird "^ B [0-9]" (Ich nehme an, es muss von einer Zahl gefolgt werden)

BA wird "^ BA [0-9]"

DD1 wird "DD ^ ([1-7])"

DD8 wird "^ DD ([8-9] | [1] [01])" passen DD8, DD9, DD10, DD11

Dann führen Sie einfach die Regex gegen die Zeichenfolge (keine Notwendigkeit, es zu Teilzeichen als die ^ stellt sicher, dieses Spiel zu Beginn der Zeichenfolge auftritt) und prüfen, ob eine erfolgreiche Übereinstimmung war.