JSFiddle - React, Tailwind, and code Playground

HTML

<select id="sel1" name="sel1">
    <option value=""></option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
</select>

<select id="sel.sel1" name="sel.sel1">
    <option value=""></option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
</select>

JavaScript

//works as expected
$('#sel1').val('1');

//when there's a point in the id val(x) doesn't work.
var sel = $('#sel\\.sel1');
sel.val('1');

//note that it works with jQuery 1.4.2 and 1.4.3

//debugging it I can see that no "option" in that element
//is retrieved with "find".
var len = sel.find( "option" ).length;
sel.after("<br>find = " + len);

//that's the reason jQuery( "option", this ) in the "val"
//function doesn't return anything.

//but children works
var len = sel.children().filter( "option" ).length;
sel.after("<br>children = " + len);

//seems to not affect others operations.
sel.css({'color': 'red'});