I am currently facing an issue with a page that contains two dropdown menus. The first dropdown menu displays a list of Categories, while the second dropdown menu dynamically populates a list of Services based on the selected Category.
Although the first dropdown menu is populating correctly and the associated services are being displayed in the second dropdown, I am encountering a problem. When I select a service from the second dropdown, the Category list resets and loses the previously selected value.
For example, if I choose "Account" from the Category list, the services dropdown correctly shows two options. However, when I then select a service, the Category list reverts back to its original state upon page load.
Below is the HTML code:
<select data-ng-model="vm.kioskCheckin.serviceId" data-ng-options="c.Name as c.Name for c in vm.categories"
ng-change="vm.getServicesBC()"
class="form-control input-lg" ng-required="true"
id="category">
<option value="">Choose Primary Reason for Visit</option>
</select>
<div class="v-Space10"></div>
<select id="servicesDropDown" data-ng-model="vm.kioskCheckin.serviceId"
data-ng-options="c.Name as c.Name for c in vm.servicesFiltered"
ng-change="vm.setValues()"
class="form-control input-lg invisible" ng-required="true">
<option value="">Select Service...</option>
</select>
Additionally, here is the function that populates the second dropdown (note: the second dropdown is hidden until a category is selected in the first dropdown):
vm.getServicesBC = function () {
var mySelectedCategory = $('#category').val().split("string:").pop();
vm.servicesFiltered = getServicesByCategory(mySelectedCategory);
vm.filteredServices = getServicesByCategory(vm.services);
vm.filteredServices = [];
$('#servicesDropDown').removeClass("invisible");
};
If you have any suggestions or pointers on what may be causing this issue, please let me know. Thank you!