Question

I’m not sure if it’s because I used jQuery to get the ref to the dropdown or what but my assumption is yes which is why the selected index is giving me undefined

var ddlMake = $('#<%=ddlMake.ClientID %>');
var makeid = ddlMake.options[ddlMake.selectedIndex].value;

so I get an error saying ddlMake.selectedIndex is undefined.

But if I use standard JS to ref that dropdown, then the ddlMake.selectedIndex works fine and I get a value

var ddlMake = document.getElementById('<%=ddlMake.ClientID %>');
var makeid = ddlMake.options[ddlMake.selectedIndex].value;

So is it if you use jQuery to get a ref to some element in the DOM, are you required to also use jQuery methods further to use that element such as get data from it or manipulate it or whatever?

I guess you can’t mix both..such as if you get a ref by using jquery, you can’t then use standard js methods against it? Just curious about this because it’s an important limitation if so. Not that I want to use standard JS as I’m using jquery but just curious since I did come across this pain and want to figure out the answer here.

Answer 1

The selectedIndex is an attribute of the DOM element but $('#x') returns a jQuery object. You can get the DOM object using [0] though:

var ddlMake = $('#<%=ddlMake.ClientID %>');
var makeid  = ddlMake[0].options[ddlMake[0].selectedIndex].value;