Auto-Auswahl von
-
21-08-2019 - |
Frage
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;
}
}
}
Lösung
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.
Andere Tipps
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;
}
}
- Zunächst einmal removeed wir die Variable assign Aktion aus der Schleife. Warum Abfallzyklen den gleichen Vorgang wiederholen?
- Nummer zwei, filtern wir jetzt alles ausser den Buchstaben am Anfang des Eingangs.
- Dies kann wiederum erweitert werden, um die Anzahl Suffixe enthalten, etc.
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;
}
}
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.