Our Blog
Writings, Sharing Knowledge, News, Tutorials
Loading ...
The ‘Select’ Problem After Using jqTransform and its Solution
February 18th, 2010 - By Sumeet
Recently, I was working on a project which required a customized form with only select boxes. I used jqTransform to customize the form and while working on it I discovered that after transforming the select box into a list of hyperlinks, the ‘change’ method of the select box doesn’t work at all. As ‘on-value-change’ event is a very important function for any drop down list box so here is a very simple solution to manipulate it while using jqTransform.
The Project
In this recent project of mine, I was required to construct a landing page. In this landing page, there would be a list of languages and after the user selects any particular language, the homepage of the site would open automatically in the respective selected language. It was also required to style the select list box in the way it was given in the design of the landing page. So I opted for the jqTransform jQuery plug-in, which I used once to style some forms. jqTransform is very nice plug-in to customize the forms in a very easy way and the end product is no doubt beautiful. But in this case, it became a minor speed breaker to my progress.
The Problem
The drop down list control of the html form contains the ’select’ tags which enclose the various ‘option’ tags. Here is a form which I am using in this tutorial to explain the problem:
<form> <h4>Select Box Without jqTransform</h4> <div id="box-city" class="select-menus"> <label>City</label> <br/> <select name="select-country"> <option>Gotham</option> <option>New York City</option> <option>Smallville</option> </select> <div class="clear"></div> </div> </form>
What jqTransform does is, it scans the whole ’select’ tag and creates an unordered list containing hyper-links of the options in the drop-down-list. It then hides the original ’select’ tag and its content.
<form class="jqtransform jqtransformdone">
<h4>Select box with jqTransform and normal select change method</h4>
<div class="select-menus" id="box-name">
<label style="cursor: pointer;">Name</label>
<div class="jqTransformSelectWrapper" style="z-index: 10; width: 150px;">
<div>
<span style="width: 119px;">Batman</span>
<a class="jqTransformSelectOpen" href="#"></a>
</div>
<ul style="width: 148px; display: none; visibility: visible; height: 100px; overflow: hidden;">
<li><a index="0" href="#" class="selected">Batman</a></li>
<li><a index="1" href="#">Robin</a></li>
<li><a index="2" href="#">Superman</a></li>
<li><a index="3" href="#">Spiderman</a></li>
</ul>
<select name="select-country" class="jqTransformHidden" style="">
<option>Batman</option>
<option>Robin</option>
<option>Superman</option>
<option>Spiderman</option>
</select>
</div>
<div class="clear"></div>
</div>
</form>
This does not create a problem when we use the ’select’ tag generally for selecting a particular value and then performing the form submission by using a submit button. It creates a problem when we want to perform some function when the value of the drop down list is changed.
This is normally achieved in javascript by using the ‘change’ method of the select control. The ‘change’ method captures the value-change event and we can access the value selected by the user in the following manner.
// Capturing the change event of the Non-Transformed Select Box.
$("#box-city select").change(function(){
var value= $(this).val();
alert("Value Selected = "+value);
});
But after using the jqTransform plugin, the ’select’ tag is no more there to apply the change method on.
The Solution
The solution to this, is a very simple one. We can simulate the change event for the jqTransformed drop down list by applying a click function to the hyper-link element within the unordered list. Then we can have the selected value by accessing the text of the span tag where the selected element is set or displayed.
// Capturing the change event of the Transformed Select Box using the modified method of capturing the value change event.
$("#box-age div.jqTransformSelectWrapper ul li a").click(function(){
var value= $("#box-age div.jqTransformSelectWrapper span").text()
alert("Value Selected = "+value);
return false; //prevent default browser action
});
Conclusion
This is one way of simulating the change function for drop-down-list boxes after using jqTransform to customize them. The other option is to modify the jqTransform plugin itself to properly access the onChange event of the ‘Select’ boxes. I hope the jqTransform plug-in developers can fix this problem in their next release of the plug-in. Though this is not a very important or common bug but I do hope that this was of some help.
Tags: CSS, forms, jqTransform, jQuery
About The Author
Sumeet is the founder of Code-pal. He works as a web developer, is a hardcore programmer, workaholic, fun guy and loves his family. Follow him on Twitter and Facebook.
You can follow any responses to this entry through RSS 2.0 feed. You can leave a response, or trackback from your own site.
Share the knowledge
Other Posts You Might Like
37 Responses
Trackbacks and Pingbacks
Leave a Reply
-
-
Browse
- The 'Select' Problem After Using jqTransform and its Solution 37 comment(s)
- How to Code an Overlapping Tabbed Main Menu 34 comment(s)
- Spice Up Your Twitter Feed Display Box Using CSS 14 comment(s)
- Personal Computer Assistant 8 comment(s)
- Listify, Convert Raw Text To HTML Elements 7 comment(s)
- Business Template 6 comment(s)
- Orange 4 comment(s)
-
-
Thanks for the solution above. Very useful. I wonder if you could help with one extra problem? jqtransform seems to ignore the part of a select list. Can you help me find a fix so that they are displayed in the transformed select list???
Any pointers would be much appreciated!
The code seems to have been removed. I was referring to ‘optgroup’ part of a select list
I didn’t get which problem you are referring to? May be you can post a link to an example or something so that I can take a look at it in details?
Hope your problem is solved though
Have you tried to create a select list that uses the ‘optgroup’ feature as well as ‘option’? It seems to just ignore these entirely and not build them into the ‘ul’ list. How can I get them to build them in?
I haven’t yet tried that. Will try it out when I get time
Hi. im just wondering if anyone has managed to extend the the jqTransform JS to cover multiselect . currently, the script just bypasses any select lists with the attr of multiple. Im no JS expert though. does anyone have any ideas?
How can I populate a Select after using jqTransform?
You don’t have to populate the select tag after using jqTransform as it automatically transforms the existing ‘option’ tag elements into hyper-links. So if you provide the options from the starting itself using the option tags it won’t be a problem.
OR
You mean that you want to dynamically populate the select box as per some user interaction with the form ?
Yes, I want to dynamically populate the select box.
Well, to do that you would have to select the unordered list of hyperlinks generated by jqTransform and then append a list element containing the hyperlink (your option) to that unordered list.
Can you give me a simple example on how to do that? Just starting with jquery.
Thank you very mauch.
@fcaracol : I work on that just now for a project, give you a feedback when it’s ok.
@fdjulien: Bonjour
thats great.. I am so caught up with my examinations that am unable to give time to anything else.. 
Et hop :
http://pastebin.com/tZraxjDX
Have a good day ^^
(if you know how we can control height of child list after show/hide, feedback)
Thanks all for the messages.
My solution for the problem:
http://pastebin.com/wYSgh3hj
nice,thx.
serwisyleit.pl int´s last blog ..The TRIC to developing positive relationships in education
jqtransform not working for more than 11 select tags on page
Search
.css({zIndex: 10-index})
and replace just with
.css({zIndex: 999-index})
That’s ok
http://plugins.jquery.com/node/13233
I’m having a similar issue and have tried adjusting this code for use with window.open for one of my option values. I was wondering if you could provide an example where of three options in a select: cat, dog, and bird- selecting “dog” would popout a new window for an external link. I can’t seem to get the live() event to do it correctly.
Thank you for the help.
So what you want to do is, when you select a particular option, a pop up window would open to an external link with respect to the option selected?
Exactly. I have no javascript experience to speak of, but using your guide I did fashion out a script that would test if the option text matched a certain string and, if so, issue a window.open event. The code is probably a little heavy but it works.
However, I would like to figure out how achieve jqtransform functionality for forms located in divs that are loaded dynamically from jquery tabs.
Well, you can enable jqTransform on divs which are loaded dynamically by again calling the jqtransform method on the id or class of that particular form in that dynamically generated div.
Sumeet,
Thank you for that response. I turn up a lot of search results with people having similar issues with dynamically loaded content but unfortunately with no solutions. If you can provide an example of reapplying the jqtransform script to dynamically loaded content, I’m sure the internet will thank you. I know I will.
Hmmm.. I will see what I can come up with it
Till that time, try reassigning the jqtransform method to the dynamically generated form and maybe reload the page using Ajax? As far as I think, jqtransform is applied when the page is loaded..
Hey Sumeet – I have a, hopefully, painless question for you: How do you get those dropdowns to be all the same width. To give you an example of what I’m after, http://givester.de/ has 9 of these textboxes. Additionally, if you select one of the super-long options, the wording doesn’t extend out of the select box but rather stays inside — something that I’ve had an issue with, using another js method. Well, hope to hear back from you!
Mike´s last blog ..Dog of The Day- Bola From Sacramento SPCA!
I really like what they have done with the drop down options in that site you gave. The really long options fitting properly in the select box is because they have taken an optimum width of the select box such that the longest option that they provide is less than it. I dynamically increased the length of an option (using firebug) and it went outside the select box. By outside I mean, some part of the text got hidden.
Regarding the way they have divided the options into two different divs is very interesting. Any idea how they have done that? I think they either modified the jqTransform code in such a way that when the number of list item goes beyond a particular amount, then they start adding the list items in a new div and so on. Hence, for example, after every 7th list item, a new wrapper is created and so on. They obviously used CSS to bring them all in a horizontal position.
hi,
i am creating a form with jqtransform in which there are lots of select box, at one stage i need to disableselect box how can i do this
Why don’t you just create class called ‘hide’ which has a ‘display : none ‘ property. Whenever you want to disable any select box, just add that class to that particular select box dynamically…
I’ve got the same problem, except that I need the option value, not the text. I wrote that simple code:
$(“div.jqTransformSelectWrapper ul li a”).click(function(){
var index = $(this).attr(‘index’);
var value = $(’select.jqTransformHidden option:eq(‘+index+’)').attr(‘value’);
window.location.href=value;
});
David Judik´s last blog ..Sorszámozott lista formázása CSS-sel
Hi,
This is a really useful mod – thanks for putting the effort into it
I’m trying to find a way to reset a single select (drop down list).
The traditional Javascript would be:
document.getElementById(’selectname’).selectedIndex = 0;
document.getElementById(’selectname’).options[0].selected = true;
However, the above has no effect on the jqtransform select as its a list.
Is there a way I can reset the jqtransform select?
If it means doing the about JS (so the form is submitted with the correct values) and then the jqtransform is faked by changing the text and applying the selected style to the 1st li and removing it from the current one?
Hope I’m explaining this okay? lol
Chris,
There are a couple of options.
1. You can call jqTransformReset(); — this will reset all select boxes, radio buttons, and check boxes. This may be too extreme for your case.
2. You can copy the code jqTransform uses to reset the select boxes:
$(‘.jqTransformSelectWrapper select’,f).each(function () { sel = (this.selectedIndex < 0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function () { $('a:eq(' + sel + ')', this).click(); }); });
Just change the initial jQuery selector to match your specific field, remove the context (the ",f") and have at it. I just tested this and it works.
Chris,
Be warned that my method described above will fire the “change” event for the select box if you have added: “$select.trigger(‘change’);” in at line 281 (as mentioned below).
Only tested under jQuery 1.4, but if you add:
$select.trigger(‘change’);
on line 281 (after “$ul.hide();” and before “return false;”) in the SELECT section, it will fire the event for you.