Auto-selezione di in base al campo di input, con alcuni avvertimenti

Question

Ho un elemento SELECT in cui ho bisogno di auto-selezionare l'opzione appropriata in base alla prima metà di un codice postale inserito in un campo di testo. codici postali britannici sono nella forma AB12 3CD , in cui la prima sezione è costituita da 1-2 lettere rappresentano la contea e un numero che rappresenta l'area all'interno della regione. Gli ultimi 3 caratteri sono irrilevanti per questa domanda.

Per la maggior parte dei campi si basa sul solo la prima lettera (s), ma per alcune opzioni si tratta di una gamma di codice postale. Il codice HTML dovrebbe spiegare meglio:

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

Il mio codice qui sotto vi attualmente selezionare l'elemento corretto quando il valore è esattamente due lettere. Ma ho bisogno di espanderla fino a comprendere i codici di singole lettere (Birmingham) e gli intervalli di CAP (Dundee). Nota: posso cambiare i valori di opzione se non v'è una soluzione che garantisce valori speciali, per esempio DD1 / DD2 invece di DD1 / DD8.

In breve:

• B2 -> Birmingham
• BA3 -> Bagno
• DD5 -> primo Dundee [DD1]
• DD11 -> seconda Dundee [DD8]

Ecco il Javascript che ho finora ...

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

È possibile utilizzare un'espressione regolare per estrarre i valori ...

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

Poi, per un codice con una serie come DD, forse qualcosa di simile (pseudo-codice) ...

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;

Quindi, per DD5, questo tornerà DD1 e per DD11 tornerà DD8. Qualcosa di simile B2 o BA3 restituirà semplicemente B e BA, rispettivamente.

Si potrebbe cambiare il if ad un switch se si dispone di più di altri codici con diverse gamme. Quindi, è sufficiente impostare la voce di elenco con quel valore, come la selezione corrente.

Answer 2

Sostituire:

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

Con:

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. Prima di tutto, si removeed l'azione assegnazione variabile dal circuito. Perché i cicli di rifiuti ripetere la stessa operazione?
2. Numero due, ora filtrare tutto tranne le lettere in principio dell'ingresso.
3. Questo a sua volta può essere ampliato per includere i suffissi numerici, ecc.

Answer 3

È possibile confrontare l'inizio della zipValue con i valori opzioni. Non c'è bisogno di espressioni regolari. Basta usare 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

Non sono sicuro di come avrebbe funzionato in javascript ma mi piacerebbe fare qualcosa di simile al seguente:

• Imposta i valori per essere espressioni regolari per abbinare quello che stai cercando per

E allora, "B", diventa "^ B [0-9]" (sto supponendo che deve essere seguito da un numero)

BA diventa "^ BA [0-9]"

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

DD8 diventa "^ DD ([8-9] | [1] [01])" per abbinare DD8, DD9, DD10, DD11

Poi basta eseguire il regex contro la stringa (non c'è bisogno di sottostringa come l'^ rende sicuro che questa partita si verifica all'inizio della stringa) e verificare se ci fosse una relazione.