html - jQuery.load not working with a combined string -

im trying use jquery.load function partial view controller using following code:

var url = '/home/dropdowncity?state=' + $('#dropdownstate:first-child').text(); console.log(url);  $("#containercity").load(url); 

if code ran written above, not work. nothing loaded , no errors. if explicitly define "state", work:

var url = '/home/dropdowncity?state=ohio'; 

in both cases, console.log(url) logs same thing: /home/dropdowncity?state=ohio

why work when define state in string, not when try combine string text element though both seem output same string? how make work way want to?

please note :first-child supposed further filter collection of possibly more one. when have 1 element, case id selector, not need that, , when element you're applying :first-child happens not first child of it's parent, alway empty collection:

so use:

$('#dropdownstate').text().trim(); 

unless you're interested in children of element , want first child:

$('#dropdownstate').children().filter(':first-child').text().trim(); 

and want sure there're no spaces around text() using .trim(). may event go step further , make sure there're allowed characters using regular expression.

$('#dropdownstate').text().replace(/([a-z ]*)/,'$1').replace(/ /g, '+');