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.

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.

• jquery
• javascript
• select
• plugin-ninja-forms

Share Improve this question asked Jul 25, 2019 at 19:36 Shritama SenguptaShritama Sengupta 111 silver badge22 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

What are you trying to accomplish? You are assigning the value at the wrong place. It should be:

jQuery(function($){
    var value = $("#field-id option:selected").val();
    console.log(value);
    //And then here use the value
});