분명히 IE9/Firefox/Safari/Chrome/Opera 구현이 적합합니다. 즉, option의 값이 option의 innerText와 같을 경우 해당 값을 생략할 수 있으며, 기재할 수 없다. 이것이 더 간결합니다. 불행하게도 IE6/7/8은 이런 방식으로 작성하는 것을 지원하지 않습니다. 모든 브라우저와의 호환성을 보장하려면 옵션 작성 시 value 속성을 생략하지 마십시오. 위 html 코드를 살짝 수정
코드 복사
코드는 다음과 같습니다.
첫 번째 옵션에 value 속성을 추가합니다. 이때 테스트 단계는
1, 2개 선택 2, 1개 선택
이고 두 번 나타나는 결과는 다음과 같습니다.
IE6/7 /8 : [null 문자 문자열, 1]
IE9/Firefox/Safari/Chrome/Opera : [two,1]
결과에서 다음과 같을 수 있습니다. 각 브라우저의 구현은 대략 다음과 같습니다.
IE6/7/8에서 옵션에 값이 없으면 빈 문자열이 반환됩니다. IE9/Firefox/Safari/Chrome/Opera에서는 option의 값을 먼저 가져옵니다. value 속성이 없으면 option의 innerText 값을 가져옵니다. 코드 다시 수정
코드 복사
코드는 다음과 같습니다.
< onchange="alert(this.value.length)">
이전 단계와 비교하여 두 번째 옵션에서는 양쪽에 공백이 추가됩니다. 이번에는 값의 길이를 경고합니다. 두 개를 선택하세요. 이때 각 브라우저에는 다음과 같은 결과가 나타납니다.
IE6/7/8 : 0
IE9/Firefox/Safari/Chrome/Opera
: 3 IE6/7/8에서는 값 속성이 없는 옵션에 대해 빈 문자열이 반환되며 길이는 당연히 0입니다. 이 테스트는 IE9/Firefox/Safari/Chrome/Opera와 같은 최신 브라우저에 중점을 둡니다. 모두 3을 반환하지만 5는 반환하지 않습니다. 이러한 브라우저는 양쪽의 공백 문자를 잘라내는 것을 볼 수 있습니다.
이전 테스트에서 IE9/Firefox/Safari/Chrome/Opera에서는 option 값을 먼저 가져오고 value 속성은 option의 innerText 값을 가져오지 않는다고 언급했습니다. 값 속성이 설정되지 않은 옵션의 경우 innerText를 값으로 반환하려고 노력하고 양쪽의 공백 문자를 자동으로 제거합니다. 위에서 옵션의 innerText가 반환된다고 언급했는데 innerHTML이 아닙니다. 그런 다음 코드 수정
두 번째 옵션에는 값 속성이 없으며 내부에 범위 요소가 있습니다. 이때 2개를 선택하세요. IE9/Firefox/Safari/Chrome/Opera에서 팝업되는 내용은 여전히 "two"이 아닌 "two"입니다. 길이를 경고해 보면 "two"의 길이인 16이 아니라 여전히 3인 것을 알 수 있습니다.
옵션 값 작성을 잊어버린 경우 이러한 최신 브라우저는 올바른 결과 값(클라이언트 프로그래머가 원하는 것)을 반환하려고 시도하며 내결함성은 IE6/7/8보다 우수하다는 것을 알 수 있습니다. .