Jquery change function after replacing select boxes with twitter bootstrap

Question

http://jsfiddle.net/xuAQv/ <-- Link to my bad code on JsFiddle.

So i found this bit of code which coverts traditional form select boxes into their twitter bootstrap styled versions. It essentially just hides the select, and creates the html for a select box using bootstrap's css / js.

http://blog.iamjamoy.com/convert-select-boxes-to-a-fancy-html-dropdown I customized the plugin a bit to change the appearance of the drop downs.

The problem i have now is that the $("#mySelect").change(function(){}); no longer fires. I tried adding .live to it, and .on to it, without any luck.

Do i need to modify the plugin? Here is my code for the plugin..

/*!
 * Convert <select> elements to Dropdown Group
 *
 * Author: John Rocela 2012 <[email protected]>
 * Customized: Frank B 3/2012
 */
jQuery(function ($) {
    $('select').each(function (i, e) {
        if (!($(e).data('convert') == 'no')) {
            //get some initial data...
            xSelect = $(e).attr('id')
            xLabel = $("#" + xSelect + " option:selected").text();
            xClass = $(e).data('class')
            $(e).hide().wrap('<div class="btn-group" id="select-group-' + i + '" />');
            var select = $('#select-group-' + i);
            select.html('<a class="btn dropdown-toggle ' + xClass + '" data-toggle="dropdown" href="javascript:;">' + xLabel + ' <span class="caret"></span></a><ul class="dropdown-menu"></ul><input type="hidden" value="' + $(e).val() + '" name="' + $(e).attr('name') + '" id="' + $(e).attr('id') + '" class="' + $(e).attr('class') + '" />');
            $(e).find('option').each(function (o, q) {
                select.find('.dropdown-menu').append('<li><a href="javascript:;" data-title="' + $(q).text() + '" data-value="' + $(q).attr('value') + '">' + $(q).text() + '</a></li>');
                if ($(q).attr('selected')) select.find('.dropdown-menu li:eq(' + o + ')').click();
            });
            select.find('.dropdown-menu a').click(function () {
                select.find('input[type=hidden]').live().val($(this).data('value')).change();
                select.find('.btn:eq(0)').html($(this).text() + ' <span class="caret"></span>');
            });
        }
    });
});

What is "mydiv" supposed to be? I'm guessing that's not actually the selector you're using? — James Montagne
– James Montagne, Commented Apr 13, 2012 at 13:08
@James, thanks fixed it. It is suppose to be the ID of the select box before it has the bootstrap treatment added by the plugin. — Frank
– Frank, Commented Apr 13, 2012 at 13:09
Strange, seems like using live or properly using on should have worked. The select is replaced by a hidden input, but that input has the same id as the select. Are you sure you passed just the id as a selector to live? — James Montagne
– James Montagne, Commented Apr 13, 2012 at 13:18
@JamesMontagne it is probably because I am not smart enough to figure out where the Jquery .on needs to be coded. Can it be put into the plugin or does it have to go into the .change() function? — Frank
– Frank, Commented Apr 13, 2012 at 13:26

James Montagne · Accepted Answer · 2012-04-13 13:31:12Z

2

If you have a look at what is actually happening in the code, the select is being replaced by a hidden input. When you change the value, that is what is getting change() called on it. You will need to use event delegation. Something like this:

$("<parent selector>").on("change","#mySelect", function(){});

Where <parent selector> is a selector matching some parent of the select which is not replaced. If needed it can be the document but ideally you want it to be as far down the tree as possible.

The reason your live didn't work is because it should have been like this:

$("#mySelect").live("change", function(){});

Though you should not use live if you are using the latest jquery, you should use on.

EDIT: Updated your fiddle: http://jsfiddle.net/xuAQv/2/

answered Apr 13, 2012 at 13:31

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Frank Over a year ago

thanks @James, the only problem i have now is that I cannot pull the .val(). Within the function, when i try: myval = $('optDeposit').val(); - It just remains undefined.

Collectives™ on Stack Overflow

Jquery change function after replacing select boxes with twitter bootstrap

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related