Hey guys, first off let me just say Im a jQuery noob, so if you see any obvious errors/improvements, please feel free to inform me! I want to make a simple plugin that auto-populates a html select element, it works fine on the first element but when I call it again to populate a second it appends nothing. Here are my calls in the jQuery UI ajax tab where #product and #new-category are the select elements:
$(function(){ $("#product").popSelect("products"); $("#new-category").popSelect("categories"); }); HTML: ><select id="product" name="product"> > < option value="">Select Product</option> ></select > ><select id="new-category" name="new-category"> > < option value="">Select Category< /option> ></select > And here is the Plugin: (function($){ jQuery.fn.popSelect = function(table) { return $(this).each(function(){ var obj = $(this); if(this.nodeName.toLowerCase() == 'select'){ $.getJSON("../app/modules/ajax/json.php", { table:table }, function(data) { var options = ''; $.each(data, function(i,item) { options += '<option value="' + item.id + '">' + item.title + '</ option>'; }); obj.append (options); }); }; }); }; })(jQuery); I also noticed the following: Replacing "id='new-category'" with "id='newwcategory'" makes it work!? is there something wrong with "-"'s in ids? Thanks!