요소 선택 : 자바 스크립트가없는 짧은 이름과 긴 이름?

Question

< > select 요소를 접을 때 짧은 표시 텍스트를 표시하고 확장 할 때 긴 텍스트를 표시 할 수있는 자바 스크립트가 아닌 메소드가 있습니까? < 옵션 인 >에 대한 "label"속성이 있지만 IE7 +에서만 지원됩니다.

예 : 303

마인드 명상

• 철학 101
• 종교 202
• 인트로 및 잠재적 404

:

확장 메뉴를 표시 할

... 동안 (해당하는 아이템)을 표시 할 축소 메뉴 :

• PHIL 101
• RELI 202
• MEDI 303
• MIND I가이를 이용하고있어 404

:

여러 가지 선택 메뉴가있는 양식의 레이아웃을 정리하려고합니다. CSS 너비 속성을 사용하여 메뉴의 균일 한 너비를 얻을 수는 있지만 표시 텍스트가 더 긴 항목은 메뉴 축소시 잘립니다. 짧은 텍스트를 표시하면이 문제가 해결됩니다.

Answer 1

아니요, JS를 사용하지 않고도 그런 일을 할 수 있다는 것을 알고있는 방법이 없습니다. 이와 비슷한 것은 시작점 일 수 있지만 Firefox에서만 작동합니다.

<style> 
    .sel:focus .l{display:; visibility: visible;} 
    .sel:focus .s{display: none; visibility: hidden;} 
</style> 
<select class="sel"> 
    <option class='s'>ntry1</option> 
    <option class='l'>entry aaaaaaa</option> 
    <option class='s'>entry2</option> 
    <option class='l'>entry bbbbbbb</option> 
</select>