I can't seem to get variables working within selectors in jQuery. This is a really simple but annoying bug! See this jsFiddle for an example:
The following does not work:
var folder_id = "folder"; $("#selects select[name='" + folder_id + "']").append('<span>Hi></span>'); Markup:
<div id="selects"> <select name="folder_id"> <option>hey</option> </select> </div> Answering the question you actually asked (but see also below):
You're telling it to find a select with the name folder, not folder_id. But your select has the name folder_id.
So either change the code:
// v----- change here var folder_id = "folder_id"; $("#selects select[name='" + folder_id + "']").append('<span>Hi></span>'); Updated fiddle (but again, see below under the break)
...or change the markup:
<div id="selects"> <select name="folder"> <option>hey</option> </select> </div> But note that you're trying to append a span to a select, which is invalid markup and won't work. select elements cannot contain spans (only option and optgroup elements). If you meant to put it after the select, use after:
// v--- change here $("#selects select[name='" + folder_id + "']").after('<span>Hi></span>'); // also note the `>` you probably don't want here ----^ It works fine but your folder_id was wrong so it didn't match.
var folder_id = "folder_id"; $("#selects select[name='" + folder_id + "']").append('<span>Hi</span>'); Your id was set incorrectly, plus some HTML was incorrect in the span being appended.
In addition to everyone else's answers, which are correct, why are you adding a <span> to a <select> list?
Surely you should be adding something like this if you're trying to add a new option?
$("#selects select[name='" + folder_id + "']").append('<option>Hi</option>'); This will add a new option to the select list, see this fiddle.
Alternatively, if you're trying to add the text to the option list, why not something like this?
$("#selects select[name='" + folder_id + "'] option").append('<span>Hi</span>'); See this fiddle.
See my updated (working) example:
There were several issues with your code:
1 - Incorrect value assigned to folder_id
2 - Not using <option> tag for value you are appending
The updated JavaScript is:
var folder_id = "folder_id"; $('#selects select[name="' + folder_id + '"]').append($('<option>Hi</option>')); 