WHy Doesnt This Javascript Function Work

Question

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); 

• Mutt: what are fancySelectLarge,selectWalkerType,and walkerTypeLi? Are the variables that contain strings?
• kikito: I suspect the issue is related, at least partially, with all those quotes-after-ids. Example: $('#' + ParentDivID + "'") should be $('#' + ParentDivID).
• Patricia: is fancySelectLarge a variable containing the id? or is that the actual id ?
• Jared: Can you give some more info? What is this supposed to be doing, what is it doing and what is it not doing? Are there any errors?

Answer 1

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.

Answer 2

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); `

Answer 3

You are messing up all of your string concatenations like:

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

Answer 4

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();
}

Answer 5

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 + "'");

Answer 6

$(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.

Answer 7

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.

Answer 8

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

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