I currently have a dropdown list that is populated on page load and sometimes the dropdown list doesn't contain anything and is empty. I would like the hide the dropdown list whenever there aren't any items in the list. I thought i could do this via javascript but i am not sure what i could be doing wrong because after adding the javascript it stills appear on the page.

dropdown select:

<select data-bind="options: endReason() ? endReason().SubReasons : [], value: subReasonId, optionsText: 'Text', optionsValue: 'Value', visible: isChecked"
                            name="subReasons">
                        </select>

This is my Javascript:

<script type="text/javascript"> 
function OnClientDropDownOpening(sender, eventArgs) 
{   var combo = $find("<%= subReasons %>"); 
    items = combo.get_items(); 
    if(items.get_count()==0) 
    { 
         eventArgs.set_cancel(true); 
    } 
} 
</script>