다음과 같습니다
IE6/7/8의 Option 요소에 값이 없으면 Select는 <body> ; <br><onchange="alert(this.value)"> <br><option>1</option><option>two</option> 세</option> <br></select> <br></html>
<br>변경 이벤트가 발생하면 각 브라우저의 테스트 결과는 다음과 같습니다. <br><br>IE6/7/8<br>: 빈 문자열이 나타납니다<br><br>IE9/Firefox/ Safari/Chrome/ Opera</div>: 해당 옵션 요소의 innerText 값을 팝업으로 띄워줍니다. <br><p>분명히 IE9/Firefox/Safari/Chrome/Opera 구현이 적합합니다. 즉, option의 값이 option의 innerText와 같을 경우 해당 값을 생략할 수 있으며, 기재할 수 없다. 이것이 더 간결합니다. 불행하게도 IE6/7/8은 이런 방식으로 작성하는 것을 지원하지 않습니다. 모든 브라우저와의 호환성을 보장하려면 옵션 작성 시 value 속성을 생략하지 마십시오. <br><strong>위 html 코드를 살짝 수정</strong><br><strong></strong><br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br></p>
<div class="codetitle"> <span><select onchange="alert(this.value)"> <a style="CURSOR: pointer" data="79875" class="copybut" id="copybut79875" onclick="doCopy('code79875')"><option value="1">one</option> <u><option>two</option> 🎜> <option>3</option> </u></select> </a></span>
</div>첫 번째 옵션에 value 속성을 추가합니다. 이때 테스트 단계는 <div class="codebody" id="code79875">1, 2개 선택<br>2, 1개 선택<br><br>이고 두 번 나타나는 결과는 다음과 같습니다. <br><br>IE6/7 /8<br> : [null 문자 문자열, 1]</div>
<br>IE9/Firefox/Safari/Chrome/Opera<br> : [two,1]<br><br>결과에서 다음과 같을 수 있습니다. 각 브라우저의 구현은 대략 다음과 같습니다. <br><br>IE6/7/8에서 옵션에 값이 없으면 빈 문자열이 반환됩니다. <strong>IE9/Firefox/Safari/Chrome/Opera에서는 option의 값을 먼저 가져옵니다. value 속성이 없으면 option의 innerText 값을 가져옵니다. </strong><br>코드 다시 수정<strong></strong><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br><br> <div class="codetitle">< onchange="alert(this.value.length)"> <span><option value="1">one</option> <a style="CURSOR: pointer" data="57849" class="copybut" id="copybut57849" onclick="doCopy('code57849')"><option> <u>< ;옵션>3</option> </u></select> </a></span>
</div>
<div class="codebody" id="code57849">
<br>이전 단계와 비교하여 두 번째 옵션에서는 양쪽에 공백이 추가됩니다. 이번에는 값의 길이를 경고합니다. 두 개를 선택하세요. 이때 각 브라우저에는 다음과 같은 결과가 나타납니다. <br><br>IE6/7/8<br> : 0<br><br>IE9/Firefox/Safari/Chrome/Opera</div> : 3<br>IE6/7/8에서는 값 속성이 없는 옵션에 대해 빈 문자열이 반환되며 길이는 당연히 0입니다. 이 테스트는 IE9/Firefox/Safari/Chrome/Opera와 같은 최신 브라우저에 중점을 둡니다. 모두 3을 반환하지만 5는 반환하지 않습니다. 이러한 브라우저는 양쪽의 공백 문자를 잘라내는 것을 볼 수 있습니다. <p><br>이전 테스트에서 IE9/Firefox/Safari/Chrome/Opera에서는 option 값을 먼저 가져오고 value 속성은 option의 innerText 값을 가져오지 않는다고 언급했습니다. 값 속성이 설정되지 않은 옵션의 경우 innerText를 값으로 반환하려고 노력하고 양쪽의 공백 문자를 자동으로 제거합니다. <strong></strong>위에서 옵션의 innerText가 반환된다고 언급했는데 innerHTML이 아닙니다. 그런 다음 코드 수정<br><strong></strong><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다. <br><br> </p>
<div class="codetitle"><onchange 선택 ="alert( this.value)"> <span><option value="1">one</option> <a style="CURSOR: pointer" data="97370" class="copybut" id="copybut97370" onclick="doCopy('code97370')"><option><span>two</span></option> <u>< ;option>3</option> </u></select> </a></span>
</div>두 번째 옵션에는 값 속성이 없으며 내부에 범위 요소가 있습니다. 이때 2개를 선택하세요. IE9/Firefox/Safari/Chrome/Opera에서 팝업되는 내용은 여전히 "<span>two</span>"이 아닌 "two"입니다. 길이를 경고해 보면 "<span>two</span>"의 길이인 16이 아니라 여전히 3인 것을 알 수 있습니다. <div class="codebody" id="code97370">
<br>옵션 값 작성을 잊어버린 경우 이러한 최신 브라우저는 올바른 결과 값(클라이언트 프로그래머가 원하는 것)을 반환하려고 시도하며 내결함성은 IE6/7/8보다 우수하다는 것을 알 수 있습니다. . <br><br>관련: <br><br>브라우저별 옵션 요소 성능 차이<br> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="jQuery 이름 충돌 해결 방법_javascript 팁" href="https://m.php.cn/ko/faq/20229.html">jQuery 이름 충돌 해결 방법_javascript 팁</a></span><span>다음 기사：<a class="dBlack" title="jQuery 이름 충돌 해결 방법_javascript 팁" href="https://m.php.cn/ko/faq/20231.html">jQuery 이름 충돌 해결 방법_javascript 팁</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
