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

I'm trying to change the child option when the parent option gets changed for instance this is what happens with bootstrap

<div >
                    <span >Industry *</span>
                    <div>
                        <select  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 ></div>
                    </div>
                </div>
                <div >
                    <div >
                        <span >What service do you need?</span>
                        <div >
                            <input  id="radio1" type="radio" name="type-product" value="physical"
                                checked="checked">
                            <label  for="radio1">
                                Buying
                            </label>
                        </div>
                        <div >
                            <input  id="radio2" type="radio" name="type-product" value="digital">
                            <label  for="radio2">
                                Selling
                            </label>
                        </div>
                        <div >
                            <input  id="radio3" type="radio" name="type-product" value="service">
                            <label  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

CodePudding user response：

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