CODEWITHSUNDEEP
javascriptjquery
Mr. Smee
Mr. Smee

Reputation: 960

WHy Doesnt This Javascript Function Work

What I'm trying to do here is make one function that does all the functionality for a custom select element. So I made a function that accepts three parameters which are defined in the function itself (see code below for more detail). I'm trying to accomplish the following: I want the parameters to be the IDs of the various elements (the wrapper div for example), and I want those parameters to be dropped in the function. My Code is below. Thanks so much

function createList(ParentDivID,SelectMenuID,ListMenuID) {
            $('#' + ParentDivID + "'");
            $('#' + SelectMenuID + "'");
            $('#' + ListMenuID + "'");
            var options = $("#" + SelectMenuID +'"' ).find("option");

                $(options).each(function(){
                    $(ul).append('<li>' + 
                    $(this).text() + '<span class="value">' + 
                    $(this).val() + '</span></li>'); 
                    });
                var ul = '<ul id="' + ListMenuID + "></ul>";
                $('#' + ParentDivID + "'").append(ul).end().children('#' + ListMenuID + "'").hide().click(function(){$(ul).slideToggle();});
                $("#" + SelectMenuID + '"').hide();
        }
        createList(fancySelectLarge,selectWalkerType,walkerTypeLi);

Upvotes: 1

Views: 173

Answers (8)

Ben
Ben

Reputation: 278

and you want also try to create the dom element like this

$('<span class="value">') instead of a string value '<span class="value">'.

Upvotes: 0

Richard Dalton
Richard Dalton

Reputation: 35793

It's generally a bit of a mess but I've tried to fix as much as possible.

function createList(ParentDivID,SelectMenuID,ListMenuID) {
        var options = $("#" + SelectMenuID).find("option");
        var ul = $('<ul>', {id: ListMenuID});
        $(options).each(function(){
            ul.append('<li>' + 
            $(this).text() + '<span class="value">' + 
            $(this).val() + '</span></li>'); 
        });
        $('#' + ParentDivID)
            .append(ul)
            .end()
            .children('#' + ListMenuID)
            .hide()
            .click(function() { ul.slideToggle(); });
        $("#" + SelectMenuID).hide();
}

Upvotes: 1

Josh Mein
Josh Mein

Reputation: 28625

You only need to do your selectors like this

$('#' + ParentDivID);

Also you need to stop interchanging 's and "s because it is causing you to miss some closing quotes

    function createList(ParentDivID,SelectMenuID,ListMenuID) {
        var options = $('#' + SelectMenuID).find('option');

        $(options).each(function(){
            $(ul).append('<li>' + 
                $(this).text() + '<span class="value">' + 
                $(this).val() + '</span></li>'); 
        });

        var ul = '<ul id="' + ListMenuID + '"></ul>';

        $('#' + ParentDivID).append(ul).end().children('#' + ListMenuID).hide().click(function(){$(ul).slideToggle();});
        $('#' + SelectMenuID).hide();
    }

    createList(fancySelectLarge,selectWalkerType,walkerTypeLi); `

Upvotes: 5

Michael Berkowski
Michael Berkowski

Reputation: 270599

When you call the function, are the three parameters already variables assigned elsewhere in your code? If not, and the are actually the string id attributes, you need to enclose them in quotes.

createList("fancySelectLarge", "selectWalkerType", "walkerTypeLi");

Note: See other valuable responses about the incorrect quoting in $('#' + ParentDivID + "'");

Upvotes: 1

Code Maverick
Code Maverick

Reputation: 20415

You are messing up all of your string concatenations like:

$('#' + ParentDivID + "'"); should be $('#' + ParentDivID);

Upvotes: 3

rid
rid

Reputation: 63442

You need to define ul before using it. Also, define it as $('<ul.../>') not just '<ul.../>', so that you can create a jQuery element from that definition.

Upvotes: 0

Amy B
Amy B

Reputation: 17977

$(ul) is undefined when execution reaches it, because var ul is only declared a few lines later on. You will also need to use document.body.createElement('ul') instead of putting '<ul ...>' in a string.

Also, the lines $('#' + ParentDivID + "'"); don't do anything.

Upvotes: 0

Quentin
Quentin

Reputation: 943108

At a guess, it is probably because your ids don't end in quote characters (which aren't allowed in ids in HTML 4), but you are appending them to the strings you are searching for with jQuery.

Upvotes: 7

Related Questions