Jquery and ASCX control rendered multiple times on a page

Question

I have an ascx control which contains dropdownboxes I want to be able to reset with JavaScript. Because the ascx control is rendered multiple times on the aspx page, I programatically add a distinguishing field to each dropdown such as this in the code behind of the ascx:

var g = Guid.NewGuid().ToString().Replace("-", "");
DropDownListBool.Attributes.Add("jqID", "ddBool" + g);
DropDownListEqual.Attributes.Add("jqID", "ddEq" + g);

On the rendered page, when I want to reset the dropdowns for one of the controls, I have a hyperlink which invokes a javascript function with g as an argument.

In the javascript, using jquery, I try to get both dropdowns for one specific ascx control like this:

function clearControl(g) {
var dds = $("select[jqID = 'dd\\S*" + g + "']");
}

I then do:

jQuery.each(dds, function(i, val) { val.select = 0; });

Should this work? Right now it is resetting seemingly random dropdown boxes. Is there perhaps a limit to attribute length?

Answer 1

I think you might have better luck with a different selector, say the "ends with" attribute selector.

var dds = $("select[jqID$='" + g + "']");

If you needed to select based on starting with dd and ending with the value of g, you could use a filter and utilize both "ends with" and "starts with";

var dds = $("select[jqID^='dd']").filter( "[jqID$='" + g + '']");

As far as I know you can't use a regular expression when using the attribute equals selector. I'm surprised it works for you at all.