add elements in 2nd dropdown list depending upon the element selected in 1st dropdown using jquery and php

Question

I'm trying to populate Cities as per the State selected by user in dropdown lists.

I've a function in jquery defined as:

function onchange1(dropdownmenu,field_name,id)
{
  alert(field_name);

  $.post(
  'wppb.city.php', 
  { field_name: id},
  function(data) {
    alert(data);
    $('#'+dropdownname).html(data);

    alert("Data Loaded: " + data);
  });   

  alert($('#'+dropdownname).html());
}

and I'm trying to get values from the location where I've called this function. I've called this function in html tags as:

<select name="state" id=state onChange="onchange1(city,state,this.value);">

where city is the name of my 2nd dropdownmenu, state is the field_name and this.value is the id.

But when this function is being called and when alerted it's showing [objectHTMLSelectElement].

How to retrieve values from HTML and use it in jquery function ?

Answer 1

I believe what you want is

$('#'+field_name.id).val()

You might also want to look into serializeObject , a good post is this Convert form data to JavaScript object with jQuery