How can I change the child option when the parent option is changed

I'm trying to change the child option when the parent option gets changed for instance this is what happens with 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>

`

If I click the real estate option the other option under shows up, I want the options to change to a different option list when I switch from real estate to construction or any of the parent option

Is there any way to do that with Bootstrap, jQuery or vanilla javascript

I tried using bootstrap but can't figure out how to make the child options change when i select a different parent option

There's a concept called events. you can listen to some even happening (event listener), so you need to listen for a "change" event on the child select tag - <select onchange="someFunction()">... then in the function - find the parent by document.quesrySelector function or document.getElementById() function, then manipulate the parent's value property the to new one you want