Jquery – Handling HTML SELECT — few addtions
This post is in continuation of my last post about Handling HTML SELECT using jQuery javascript library. Here i just want to list few more functions added by jquery.selectboxes plugin for handling SELECT.
1. Find out Text of selected Option: Most of the time you need to show somewhere on the form or on some summary pane that what all options are selected for the form submission and you require text of selected options. This can be done by iterating on all the options in traditional way. Using jquery.selectboxes this can be done in one line:
$("#myselect").selectedTexts (); // Will return an array of Texts in case of Multi select box. $("#myselect").selectedTexts ()[0]; // For single select box
2. Find out selected options(different than selected Values): Returns a jQuery object with each
$("#myselect").selectedOptions(); // Will return an array of <option> in case of Multi select box. $("#myselect").selectedOptions ()[0]; // For single select box
One more requirement what we faced while working was that when we add options in SELECT, some times option text is long enough that it does not fit in the width of SELECT and for showing complete information of an option, it requires a tool tip which can show the text of the option.
We added another which is a modified version of addOption method and it takes another parameter as title of option. Following is the code.
$.fn.addOptionWithTooltip = function() { var add = function(el, v, t, title) { var option = document.createElement("option"); option.value = v, option.text = t, option.title = title; // get options var o = el.options; // get number of options var oL = o.length; if(!el.cache) { el.cache = {}; // loop through existing options, adding to cache for(var i = 0; i < oL; i++) { el.cache[o[i].value] = i; } } // add to cache if it isn't already if(typeof el.cache[v] == "undefined") el.cache[v] = oL; el.options[el.cache[v]] = option; }; var a = arguments; if(a.length == 0) return this; // other variables var items, v, t, title; if(a.length >= 3) { v = a[0]; t = a[1]; title = a[2]; } this.each( function() { if(this.nodeName.toLowerCase() != "select") return; add(this, v, t, title); } ); return this; };
Most Commented Posts
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Was it just you pretty much writing and producing most of the music, with having Robin and Josh come in to do a part here and there? ,