Question

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>​

Answer 1

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>​

Updated fiddle

---

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 ----^

Another fiddle