advanced code snippet search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Posted By

localhorst on 05/16/08


Tagged

fix select ie option disable htc


Versions (?)


disable select or option in IE

Published in: HTML 

URL: http://apptaro.seesaa.net/article/21140090.html

IE can't handle [ option disabled="disabled" ] tags, so this htc will help

Plain TextExpand 
  1. == HTML ================
  2.  
  3. <html>
  4. <head>
  5.   <!--[if IE]>
  7.   <style type="text/css">
  8.     select, option { behavior: url("disable.htc"); }
  9.   </style>
  10.   <![endif]-->
  11. </head>
  12. <body>
  13. <form>
  14. <select>
  15. <option>Option 1</option>
  16. <option>Option 2</option>
  17. <option disabled>Option 3</option>
  18. </select>
  19. </form>
  20. </body>
  21. </html>
  22.  
  23. == disable.htc ================
  24.  
  25. <?xml version="1.0" encoding="ISO-8859-1"?>
  26. <PUBLIC:COMPONENT LIGHTWEIGHT="true">
  27. <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="onDocumentReady()" />
  28. <PUBLIC:ATTACH EVENT="ondetach" ONEVENT="onDetach()" />
  29.  
  30. <SCRIPT type="text/javascript">
  31. //<![CDATA[
  32.  
  33. var nLastSelectedIndex;
  34. var fOnChangeOriginal;
  35.  
  36. // event handlers
  37.  
  38. function onDocumentReady() {
  39.   var sTag = element.tagName.toLowerCase();
  40.   if (sTag == "select") {
  41.     attachEvent("onchange", onChangeSelect);
  42.     attachEvent("onpropertychange", onPropertyChangeSelect);
  43.     nLastSelectedIndex = element.selectedIndex;
  44.     hackOnChange();
  45.   } else if (sTag == "option") {
  46.     attachEvent("onpropertychange", onPropertyChangeOption);
  47.     emulateOption();
  48.   }
  49. }
  50.  
  51. function onDetach() {
  52.   var sTag = element.tagName.toLowerCase();
  53.   if (sTag == "select") {
  54.     detachEvent("onchange", onChangeSelect);
  55.     detachEvent("onpropertychange", onPropertyChangeSelect);
  56.   } else if (sTag == "option") {
  57.     detachEvent("onpropertychange", onPropertyChangeOption);
  58.   }
  59. }
  60.  
  61. //
  62.  
  63. function onChangeSelect() {
  64.   if (element.options[element.selectedIndex].disabled) {
  65.     element.selectedIndex = nLastSelectedIndex;
  66.   } else {
  67.     nLastSelectedIndex = element.selectedIndex;
  68.     if (fOnChangeOriginal != undefined) {
  69.       fOnChangeOriginal();
  70.     }
  71.   }
  72. }
  73.  
  74. function onPropertyChangeSelect() {
  75.   var sChangedPropertyName = event.propertyName.toLowerCase();
  76.   if (sChangedPropertyName == "onchange") {
  77.     hackOnChange();
  78.   } else if (sChangedPropertyName == "selectedindex") { // contributed by Zecc
  79.     nLastSelectedIndex = element.selectedIndex;
  80.   }
  81. }
  82.  
  83. function onPropertyChangeOption() {
  84.   var sChangedPropertyName = event.propertyName.toLowerCase();
  85.   if (sChangedPropertyName == "disabled") {
  86.     emulateOption();
  87.   }
  88. }
  89.  
  90. // hack onChange attribute of select tag
  91.  
  92. function hackOnChange() {
  93.   detachEvent("onpropertychange", onPropertyChangeSelect);
  94.   fOnChangeOriginal = element.onchange;
  95.   element.onchange = null;
  96.   attachEvent("onpropertychange", onPropertyChangeSelect);
  97. }
  98.  
  99. // emulate disabled option
  100.  
  101. function emulateOption() {
  102.   if (element.disabled) {
  103.     element.style.color = "graytext";
  104.   } else {
  105.     element.style.color = "menutext";
  106.   }
  107. }
  108.  
  109. //]]>
  110. </SCRIPT>
  111. </PUBLIC:COMPONENT>

Report this snippet 

You need to login to post a comment.