6

I'm working on a legacy system that uses square brackets in id parameters. E.g.:

<select id="mySelect[]">
  <option value="1">Yadda</option>
  <option value="2">Yadda</option>
  <option value="3">Yadda</option>
</select>

jQuery (being javaScript) quite rightly complains when I try to use this id in, say,

$("#mySelect[]").append(options);

Given the fact that I can't change the legacy code and therefore I'm stuck with the existing id's (which may or may not be valid in any context), what would be a good way to work around this mess and let me select my elements?

PSL
  • 123,204
  • 21
  • 253
  • 243
Frank van Wensveen
  • 562
  • 3
  • 20
  • 1
    Not an answer, but you can always use `$( document.getElementById('Anything-you-like') )` and save jQuery some work. – Tim Jul 09 '13 at 15:29
  • Will try all suggestions below. Did read docs but managed to miss this. My bad. +1s all around. You guys rock. – Frank van Wensveen Jul 10 '13 at 06:54

3 Answers3

11

While using meta characters you have to escapse those.

$("#mySelect\\[\\]").append(options);

Jquery selector docs saying that

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \.

If you don't want to escape it, you can use the selector 

$( document.getElementById('mySelect[]')
Suresh Atta
  • 120,458
  • 37
  • 198
  • 307
10

Try this way:

$("#mySelect\\[\\]").append(options);

You need to escape [ and ] as they are reserved jquery chars used in selectors.

Have a look at the jquery docs

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\.bar").

and a fiddle here

Plus ofcourse you could do this $('[id="mySelect[]"]') But since it is an attribute selector performance wise this will be slower and you lose the advantage of using the id selector, but handy if you are in no way to escape the chars.

PSL
  • 123,204
  • 21
  • 253
  • 243
3

Try this jsfiddle link.

Both of the below work fine:

console.log($('[id^=mySelect]'));
console.log($('#mySelect\\[\\]'));
Mehdi Karamosly
  • 5,388
  • 2
  • 32
  • 50
  • 1
    First one is not a good selector as it is attribute selector and performance wise slower and doesn't take advantage of the id selector. For that matter you could do `$('[id="mySelect[]"]')` – PSL Jul 09 '13 at 15:32
  • @PSL Yes you are right, but it would be a problem to use `[id="mySelect[]"]` as it won't work in YUI selector and probably in chrome selector. – Mehdi Karamosly Jul 09 '13 at 16:03
  • It will work in chrome browser or any other browsers, why you think so? – PSL Jul 09 '13 at 16:17
  • In YUI (Yahoo UI) framework (similar to jQuery) `'[id="mySelect[]"]'` won't return any results, but `'[id="mySelect\\[\\]"]'` or `'[id^="mySelect"]'` will return results. – Mehdi Karamosly Jul 09 '13 at 17:04
  • 1
    He is using jquery not yui – PSL Jul 09 '13 at 17:12
  • I know :) thanks @PSL , I just wanted you to be aware that your proposed solution in your very first comment won't work if you use YUI. – Mehdi Karamosly Jul 09 '13 at 17:19
  • 1
    What is chrome selector? – PSL Jul 09 '13 at 17:20
  • @PSL `document.querySelector` and `document.querySelectorAll` actually I just tried `[id="mySelect[]"]` and got `Error: SyntaxError: DOM Exception 12` but the one with `^=` without brackets works fine. – Mehdi Karamosly Jul 09 '13 at 18:55
  • :) `document.querySelector` is not jquery. – PSL Jul 09 '13 at 18:56
  • @PSL I just answered your question : `What is chrome selector? ` – Mehdi Karamosly Jul 09 '13 at 18:58
  • 1
    That is not chrome selector. that is just native js selector available for latest browsers. – PSL Jul 09 '13 at 18:58