2

I have the following select with an unusual ID/Name attribute:

<select name="customfield_10021:1" id="customfield_10021:1" class="select cascadingselect-child">

This doesn't appear to allow me to select it with:

unit = $('#customfield_10021:1 option:selected').text();

http://jsfiddle.net/stzPQ/

uncaught exception: Syntax error, unrecognized expression: 1

How can I select this field? I've never even seen this particular syntax before, but it apparently works on submit.

Thanks!

Jared

Improve this question
2
  • Have a look at the documentation: api.jquery.com/category/selectors Commented May 5, 2011 at 15:02
  • Thank you all for the responses. The problem was between the ears, as I was focusing more on the unusual ID/Name attribute than the selector syntax. Commented May 5, 2011 at 15:09

8 Answers 8

Reset to default
8

Escape the : by using \\

unit2 = $('#customfield_10021\\:1 option:selected').text();

Updated jsfiddle

Or you can use document.getElementById("customfield_10021:1") as the context for your selector.

var s = document.getElementById("customfield_10021:1"); unit2 = $('option:selected', s).text();
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

You should escape the colon, so do this:

$("#customfield_10021\\:1")

You'd have:

unit = $('#customfield_10021\\:1 option:selected').text();

That's because the colon is a special caracter, and needs to be escaped with backslash. Hope this helps. Cheers

Improve this answer

Comments

4

Escape the colon:

unit = $('#customfield_10021\\:1 option:selected').text();

See the jQuery FAQ.

Instead of using option:selected you might want to just use .val() to get the value of the <select>:

unit = $('#customfield_10021\\:1').val();
Improve this answer

2 Comments

No, I need the text; the value is an index for a text value.
Okay, just wanted to make sure you weren't overcomplicating things.
2

Try this:

unit = $('#customfield_10021\\:1 option:selected').text();

The : is normally used for pseudo selectors, and the backslash needs to be doubled up in the string literal.

For the avoidance of doubt, the colon character is legal in ID and Name attributes.

Improve this answer

Comments

1

This works:

$('[id="customfield_10021:1"] option:selected').text()

Live demo: http://jsfiddle.net/stzPQ/2/

Improve this answer

2 Comments

That's an interesting approach. I suppose that would eliminate the colon being interpreted as a selector.
@Jared Yes I believe so. The quotes inside the attribute selector ensure that the string is indeed a name, and not another selector.
1

I think that works:

unit = $("#customfield_10021\\:1 option:selected").text();
Improve this answer

Comments

0

Remember that a colon is used to deliminate a pseudo class, just as you do with option:selected you will have to remove the colon from the id of your element:

<select name="customfield_10021_1" id="customfield_10021_1" class="select cascadingselect-child">

This is because jQuery is trying to use #customfield_10021:1 as id = customfield_10021 with a pseudo class of 1 which doesn't exist, thus the error.

Improve this answer

3 Comments

Right! The only problem is I can't remove the colon (this is a custom field in a JIRA system).
Then you will have to escape the colon as others have suggested.
This answer is wrong - he will not have to remove the colon. He just has to escape it.
0

Another solution in JSF is to prevent the form name from prepending each id.

This can be done with the prependId="false" in the form tag :

 <h:form id="gestion_clefs" prependId="false">
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.