I have implemented a jQuery function to dynamically change multiple child dropdowns based on the selected value of the main dropdown.
For reference, you can view the image here.
However, I encountered an issue when applying the Bootstrap styles "form-control select picker" to the code. The formatting gets distorted and the functionality breaks.
Below is the code snippet that accomplishes the task of changing the child dropdowns. Additionally, I would like to include a save feature to store the relevant children when a main dropdown option has been selected:
<select class="search_top_options">
<option class="saleButton">property sales</option>
<option class="rentalButton">long lets</option>
</select>
$('.saleButton').click(function () {
$('.rentalSearch').hide();
$('.saleButton').removeClass("search_top_tab").addClass("search_top_tab_selected");
$('.rentalButton').removeClass("search_top_tab_selected").addClass("search_top_tab");
$('.saleSearch').fadeIn('fast');
});
$('.rentalButton').click(function () {
$('.saleSearch').hide();
$('.rentalButton').removeClass("search_top_tab").addClass("search_top_tab_selected");
$('.saleButton').removeClass("search_top_tab_selected").addClass("search_top_tab");
$('.rentalSearch').fadeIn('fast');
});
I am seeking guidance on resolving this issue with the Bootstrap formatting. Unfortunately, I cannot attach the screenshot here, but you can find it here.