Removing a Select Option in IE using jQuery

I have a selection list, that once selected I would like to remove or disable the option choosen. However, at a later time I may want to add or enable it again.

There is a bug in Internet Explorer that does not allow you to use the .hide() method on an option. It works just find in other browsers of course.

Searching Google I’ve determined that if I want it hidden in IE, that I would have to use the .remove() method, which removes it from the DOM, store it in an array, and add it back in when needed. I thought this was overkill.

So I found a good solution. The attribute ‘disabled’ works in IE. Since the hide() method will silently fail, do both. Therefore the option will just not be choosable in IE, and it will disapear in other browsers.

<select>
<option value="">Select One</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<a href="javascript:void(0);">add</a>
<script type="text/javascript">
//do this when the add link is clicked
$('a').click(function() {
//hide or disable the option
$('select :selected').attr('disabled','disabled').hide();
//reset the options back to the top
$('select').val('');
});
</script>

 

Google CDN Tips

Thanks to BrightMix for hosting the jQuery meetup presented by Jonathan Sharp last night in Omaha. Jonathan presented on the new features of jQuery 1.4 last night along other Q&A topics.

Lately I’ve been experimenting with the Google CDN for delivering jQuery and jQuery UI. The reasons behind using the CDN is faster library loads, cross-internet library caching, automatic version management, and decreased hosting bandwidth. Jonathan offered a few tips:

  1. SSL works with the CDN’s path based requests. Use either “http://ajax.googleapis.com” or “https://ajax.googleapis.com”.
  2. For automatic switching between http:// and https:// get rid of it. Yep – just use “//ajax.googleapis.com”. Don’t confuse the slashes as “\\” will get you a network path. This should also work for “<img src=’//…” and “<a href=’//…” but I haven’t tested that yet.
  3. When using a path such as “//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js”, you can control the automatic versioning by increasing or decreasing the dot notation on the version. In the example above, I will always get the latest version of 1.4 – currently 1.4.1. If I wanted to always get 1.4.0, I would append the “.1”. If I always wanted to get the laster 1.x version, I’d remove the “.4”.

EXT JS Designer Preview Finally Released

Awhile back when Ext 3.0 was still being built, I saw a video of an Ext JS designer, which looked similar to Flex Builder. I’ve been waiting its arival ever since.

Today they released a preview version that allows you to experiment with the designer interface and to explore how configs affect your layout. They say soon you will be able to build your application components using base Ext components and Certified user Extensions. The application is an Air App making it platform independent if you have Adobe Air installed for Windows, Linux, or Mac.