입력 필드를 기반으로 의 자동 선택, 일부 경고가 있습니다.

Question

텍스트 필드에 입력 된 우편 번호의 전반부를 기반으로 적절한 옵션을 자동으로 선택 해야하는 선택 요소가 있습니다. 영국 우편 번호는 형식입니다 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>

아래 코드는 값이 정확히 두 글자 인 경우 현재 올바른 요소를 선택합니다. 그러나 단일 레터 코드 (버밍엄)와 우편 번호 범위 (Dundee)를 포함하도록 확장해야합니다. 참고 : DD1/DD8 대신 DD1/DD2 (예 : DD1/DD2)를 보증하는 솔루션이있는 경우 옵션 값을 변경할 수 있습니다.

요컨대 :

• 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 a 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. 우선, 우리는 루프에서 변수 할당 조치를 제거했습니다. 왜 동일한 작업을 반복하는 폐기물주기?
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", "^b [0-9]가된다 (숫자가 뒤 따르는 것이 필요하다고 생각한다).

Ba는 "^ba [0-9]가된다.

DD1은 "^dd ([1-7])가됩니다.

dd8이 "^dd ([8-9] | [1] [01])" "DD8, DD9, DD10, DD11이됩니다.

그런 다음 문자열에 대해 Regex를 실행하고 (이 일치가 문자열의 시작 부분 에서이 일치가 발생하도록 하위 문자열이 필요하지 않음) 성공적인 일치가 있는지 확인하십시오.