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

Вкратце:

• В2 -> Бирмингем
• BA3 -> Ванна
• DD5 -> первый Dundee [DD1]
• DD11 -> второй Dundee [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

Заменить:

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

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

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

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

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

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

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

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

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