Get value of selected option in select field in a WordPress form

So I am trying to get which option is selected without submitting it to server side. I have 2 drop down fields, the first one is of last names and second one is of first names. Both are populated from a Google Sheet.
E.g. If user selects the Last name “Doe” then the second dropdown automatically searches for all names ending with last name “Doe” and populates second dropdown with the corresponding first names.

I am using Ninja Forms and trying to get the selected option using jQuery. Below is my code which I am adding in the functions.php file:

<script language=”JavaScript” type=”text/javascript”>;
// First Method:
var value = jQuery(function($){$(“#field-id option:selected”).val()});
console.log(value);

//Second Method:
var value = jQuery(function($){$(“#field-id :selected”).children(“option”).filter(“:selected”).text()});
console.log(value);

//Third Method:
var value = jQuery(function($){$(“#field-id :selected”).text()});
console.log(value);
</script>

Unfortunately all three methods give the output [object Object] when I try to document.write the values. I try console.log to log the values but I get a very long console outputs for each log and none of it contains the selected value in them.

Read more here:: Get value of selected option in select field in a WordPress form

Leave a Reply

Your email address will not be published. Required fields are marked *