How to hide/display dependent fields on portal widget

[Robert_Cartwrig]

Hello,

I'm trying to add dependent dropdown fields to a custom portal widget. 

The first question is yes or no (Are you a US Resident?).  Field 1 (State) shows up when "Yes" is selected.  Field 2 (Country) shows up if "No" is selected. All fields are dropdown. I'm using the button class "btn-dropdown btn-primary btn-block dropdown-toggle" and have added the hidden class like so: <div class="form-group hidden">.

I have added this script to the Client Controller (based on code found here😞

<!-- EDITING THIS POST TO COMMENT OUT THIS CLIENT CONTROLLER SCRIPT - IT'S ALL UNNECCESARY. SEE "CORRECT ANSWER" BELOW.

//  Script to remove hidden class of country/state begins here
              // Inputs value which determines the fields to revealed
var choice = $('.dropdown-menu ul > li > a').text();

// Wrappers for the all the conditional fields
var us = $('#menu textarea[name=us]').parent();
var country = $('#menu textarea[name=country]').parent();
var state = $('#menu textarea[name=state]').parent();
var all = us.add(country).add(state);   

	
var showForm = function(choice){
country.addClass('hidden');
state.addClass('hidden');

if (choice == 'Yes'){
    state.removeClass('hidden');
}  //;
if (choice == 'No'){
    country.removeClass('hidden');
};

$(document).ready(init);

var init = function(){
showForm();
}};

-->

The fields stay hidden no matter what is selected. I can remove the hidden class manually from the HTML and they appear, yet my choice function adds hidden at the get-go.

What am I doing wrong?

Thanks,

Robert

[Calvaresi E_]

In the widget client script add an change function that will check the value of the dropdown.
Inside the function, you will check the selected value e manage the visibility of the other HTML objects.

$('#inputToCheck').change(function(){
checkAndDoSomething();
});

function checkAndDoSomething(){
  var selectedOption = $('#inputToCheck').find(':selected').val();
   if(selectedOption == 'x'){
     do something;
   }
}

[Robert_Cartwrig · Accepted solution]

I don't usually mark my own answers as correct, but this is so easy and we all should know it.  That being said, I can't claim credit.  Thank you Roma Solanki with SN Support!

First...ignore everything I posted about my method above.  It's all wrong.  In fact - to avoid confusion - I'm going to edit my post to help clarify.

This is so easy. There are two steps:

1) Make sure the 'for="decision_field"' is in the label like so:

<div class="form-group">
  <label class="control-label col-sm-2" for="us"></label>

2) Add a class to the main div class of each dependent field to define its visibility by the choice like so:

<div class="form-group"
     ng-if="c.data.US == 'Yes'"
     >

Hope this helps!

Regards,

Robert