I am attempting to modify the child option based on the parent option selection, similar to how it works in Bootstrap.
`
<div class="wrap-input100 input100-select bg1">
<span class="label-input100">Industry *</span>
<div>
<select class="js-select2" name="service">
<option>Please choose</option>
<option>Real Estate</option>
<option>Construction</option>
<option>Technology</option>
<option>Food</option>
<option>Entertainment</option>
<option>Fashion</option>
<option>General Contract</option>
</select>
<div class="dropDownSelect2"></div>
</div>
</div>
<div class="w-full dis-none js-show-service real-estate-services">
<div class="wrap-contact100-form-radio">
<span class="label-input100">What service do you need?</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio1" type="radio" name="type-product" value="physical"
checked="checked">
<label class="label-radio100" for="radio1">
Buying
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio2" type="radio" name="type-product" value="digital">
<label class="label-radio100" for="radio2">
Selling
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio3" type="radio" name="type-product" value="service">
<label class="label-radio100" for="radio3">
Renting
</label>
</div>
</div>
`
When selecting the real estate option, another set of options appear. I want these options to change to a different list when switching from real estate to construction or any other parent option.
Is there a way to achieve this using Bootstrap, jQuery, or vanilla JavaScript?
I have attempted to use Bootstrap but haven't been successful in making the child options dynamically change based on the selected parent option.