입력 필드를 기반으로 의 자동 선택, 일부 경고가 있습니다.
-
21-08-2019 - |
문제
텍스트 필드에 입력 된 우편 번호의 전반부를 기반으로 적절한 옵션을 자동으로 선택 해야하는 선택 요소가 있습니다. 영국 우편 번호는 형식입니다 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;
}
}
}
해결책
정규 표현식을 사용하여 값을 꺼낼 수 있습니다 ...
/^([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
다른 범위의 다른 코드가있는 경우. 그런 다음 해당 값의 목록 항목을 현재 선택으로 설정하십시오.
다른 팁
바꾸다:
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;
}
}
- 우선, 우리는 루프에서 변수 할당 조치를 제거했습니다. 왜 동일한 작업을 반복하는 폐기물주기?
- 두 번째로, 우리는 이제 입력 시작 부분의 문자를 제외한 모든 것을 필터링합니다.
- 이로 인해 숫자 접미사 등이 포함되도록 확장 될 수 있습니다.
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;
}
}
이것이 JavaScript에서 어떻게 작동하는지 잘 모르겠지만 다음과 같은 일을 할 것입니다.
- 찾고있는 것과 일치하는 정규 표현식으로 값을 설정하십시오.
그렇다면 "b", "^b [0-9]가된다 (숫자가 뒤 따르는 것이 필요하다고 생각한다).
Ba는 "^ba [0-9]가된다.
DD1은 "^dd ([1-7])가됩니다.
dd8이 "^dd ([8-9] | [1] [01])" "DD8, DD9, DD10, DD11이됩니다.
그런 다음 문자열에 대해 Regex를 실행하고 (이 일치가 문자열의 시작 부분 에서이 일치가 발생하도록 하위 문자열이 필요하지 않음) 성공적인 일치가 있는지 확인하십시오.