Автоматический выбор <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

Я не уверен, как это будет работать в javascript, но я бы сделал что-то вроде следующего:

• Установите ваши значения в регулярные выражения, чтобы они соответствовали тому, что вы ищете

Итак, «B» становится «^ B [0-9]» (я предполагаю, что за ним должно следовать число)

BA становится "^ BA [0-9]"

DD1 становится "^ DD ([1-7])"

DD8 становится «^ DD ([8-9] | [1] [01])», чтобы соответствовать DD8, DD9, DD10, DD11

Затем просто запустите регулярное выражение для вашей строки (нет необходимости вставлять ее в подстроку, так как ^ проверяет, что это совпадение происходит в начале строки) и проверьте, было ли успешное совпадение.

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

Заменить:

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 action из цикла. Почему циклы отходов повторяют одну и ту же операцию?
2. Номер два, теперь мы отфильтровываем все, кроме букв в начале ввода.
3. Это, в свою очередь, может быть расширено, чтобы включить суффиксы номеров и т. Д.