Select elements with a period

Question

I have a simple script that shows an element based on which option you choose.

Example:

<select id="my-selector">
   <option value="cat">Cat</option>
   <option value="dog">Dog</option>
</select>

<div id="cat" class="hideme" style="display:none">
    Cat
</div>

<div id="dog" class="hideme" style="display:none">
    Dog
</div>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script>
$(function() {
    $('#my-selector').change(function(){
        $('.hideme').hide();
        $('#' + $(this).val()).show();
    });
});
</script>

But I run into problems when periods are introduced, like this:

<select id="my-selector">
   <option value="cat.meow">Cat</option>
   <option value="dog.bark">Dog</option>
</select>

<div id="cat.meow" class="hideme" style="display:none">
    Cat
</div>

<div id="dog.bark" class="hideme" style="display:none">
    Dog
</div>

I know I need to escape the periods, but the problem is that the values of the selection field and the ID's of the divs are dynamically generated and I have no control over how they are output.

Is there a way to modify the javascript to fix this issue?

and http://stackoverflow.com/q/6675454/218196, and potentially many more. — Felix Kling, Sep 12 '14 at 15:03
http://stackoverflow.com/questions/9930577/jquery-dot-in-id-selector — charlietfl, Sep 12 '14 at 15:04
http://stackoverflow.com/questions/605630/how-to-select-html-nodes-by-id-with-jquery-when-the-id-contains-a-dot — Felix Kling, Sep 12 '14 at 15:06
http://stackoverflow.com/questions/3913144/jquery-selector-not-working-when-element-contains-dot-in-tag-name — Jamie Barker, Sep 12 '14 at 15:09

score 1 · Accepted Answer · answered Sep 12 '14 at 15:02

1

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

or use attribute-value selector like this:

$('[id="' + $(this).val()+'"]').show();

Working Demo

answered Sep 12 '14 at 15:02

Milind Anantwar

81,290
25
94
125

Select elements with a period

1 Answers1