dojotype=“dijit.form.FilteringSelect” causing 'options.length' is null or not an object javascript error

Question

While executing the below code , I am getting the javascript error 'options.length' is null or not an object . However when I remove the "dojotype="dijit.form.FilteringSelect" in the jsp within select tag, it is working fine. The alert prints the correct value when dojotype attribute is not in the code but displays blank when dojotype attribute is present.I am not sure what is causing the problem. Requesting your valuable help. Thanks.

.jsp

<select name="shoppingCategoryCode1"      
id="shoppingCategoryCode1"       onchange="RatePlan.onchangeShoppingCategory();
RatePlan.updateStatus(true);"
dojotype="dijit.form.FilteringSelect"              
isValid = "RatePlan.shoppingCategoryIsValid1"
invalidMessage="<spring:message 
code='rateplan.validation.shopping.category.validation'/>"
>

.js

var sel=dojo.byId("shoppingCategoryCode1");
    alert(sel.options.length);
    for(var i = 0; i < sel.options.length; i++) {
        if(sel.options[i].value == "WHOLE") {
            sel.selectedIndex = i;
            break;
        }
    }

Answer 1

This is because when you turn shoppingCategoryCode1 into a Select widget, it is no longer a <select> DOM element. Use your favorite browser developer tools and inspect the object; you'll see that it does some crazy stuff with tables and a hidden input.

If your goal is to select a specific option, try something like dijit.byId("shoppingCategoryCode1").set("value", "WHOLE")