Is there a way to automatically update the child option when the parent option is altered?

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.

Answer №1

There is a concept known as events. One can observe certain occurrences (event listener). Therefore, it is necessary to listen for a "change" event on the child select tag -

<select onchange="someFunction()">...
. Then within the function, locate the parent using either the document.querySelector method or the document.getElementById() function, and update the parent's value property to the desired new value.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The desired outcome is not displayed following the Ajax post request

I have created an app that utilizes asynchronous AJAX requests to enable seamless chat functionality without refreshing the page. However, I'm facing an issue where the messages are not being displayed. When I inspect the network tab and navigate to t ...

modify brand information through the use of javascript and customizable settings

In the default setting, I want all product details to be displayed. If the option value matches the product's brand name (b_name), then I want to display the corresponding details. Let's consider a list of products with their details: Samsung ...

The issue of the JQuery div failing to center itself persists even after refreshing the page

I have implemented a script to centrally align the main content div within the viewing area. It works perfectly on page load or resize, but upon page refresh, the content div shifts to the left side of the page. You can see the issue here when pressing re ...

Creating an array using Vue.js

When I initialize a Vue data array like this [0: Object, 2: Object];, the console log in Vue shows the array as [0: Object, 1: undefined 2: Object];. This causes issues when iterating through with 'v-for="cell in row.cells"' as it results in tryi ...

Ensure that Mathjax underscores are consistent with the height of other characters

Presented below is the latex code being used with Mathjax. \class{mathjaxCursor}{\text{_}} ...and here is the accompanying css: .mathjaxCursor { font-weight: bold; background-color: red; } This setup results in the following display: ...

Do CSS Modules consistently generate the same class name for a specific CSS class defined within the module?

I have defined the following classes in my CSS module: .container-styles { height: 20px; width: 90%; background-color: rgb(128 , 128 , 128); } .filler-styles { height: 100%; border-radius: inherit; background-color: rgb(27, 150, 40); text-al ...

Dynamically populate 7 select boxes with options using JQuery

I have a webpage that includes 14 different dropdown menus, one for each day of the week (Monday to Sunday). Each day has two dropdowns: one for opening time and one for closing time. I used jQuery to populate all 14 dropdowns with a pre-defined list of ho ...

Is there a way to compel the browser or JavaScript to delete/disregard a cached file?

I've encountered an issue with my Javascript program that extracts data from a text file and displays it in a table. The problem arises when I update the text file - the changes don't reflect on the table because the browser is caching the file. ...

"The PHP script was executed despite having a MIME type of "text/html", which is not an appropriate JavaScript MIME type" error

I'm encountering an issue while trying to add data to an Oracle database using PHP from a Bootstrap form. When attempting to run the HTML file in Mozilla Firefox, the following error is displayed: The script from “http://localhost/CustomerPartInAs ...

Can parameters be included in the HTML class attribute?

Is it possible to embed specific information into HTML elements, like images, without disrupting valid HTML markup? Would the following example be considered valid HTML? <img src="..." class="isearcher:tags(paris+hilton,gary+suneese)" > The idea is ...

Laravel fails to generate log file for error incident

In my Laravel website, I have implemented a basic form for users to ask questions. However, when I tried submitting the form using Ajax, I encountered an error in the console: GET http://localhost/sencare_v2/ask-question-form-submit?first_name=shbshb&a ...

Get the file from the web browser

Hey there, greetings from my part of the world. I have some straightforward questions that I'm not sure have simple answers. Currently, I am working on a web application using the JSP/Servlet framework. In this app, users can download a flat text fil ...

Navigate through the overlay's content by scrolling

Objective: Looking to implement a scroll feature for long content. Issue: Not sure how to create a scroll that allows users to navigate through lengthy content. Thank you! function openNav() { document.getElementById("myNav").style.height = "1 ...

Is it possible to incorporate an external javascript file in my CSS file?

Currently, I am attempting to create a setup where my background adjusts based on the width of the user's browser. However, I am constrained by a background specified in the external stylesheet under a specific element. While I have the ability to alt ...

Show User-Uploaded Image on Redirected Webpage with Flask and html

My goal is to develop a webpage where users can submit an image, and upon submission, they are redirected to a new page displaying the rendered image. I have referenced the code from How to pass uploaded image to template.html in Flask for guidance, but un ...

What is the best way to exclude an external HTML file from being displayed on the home page?

shopping_cart.php <div id="main-container"> <div class="container"> <span class="top-label"> <span class="label-txt">Shopping Cart</span> </span> <div class="content-area"> <div class="con ...

How to vertically align content using Zurb Foundation's equalizer feature?

I am currently utilizing Zurb Foundation 5 along with the equalizer component. In a scenario where I have three columns of equal width, I am aiming to achieve vertical center alignment for the content (text) in the middle column and vertical bottom alignme ...

JavaScript (geolocation) error: Unhandled TypeError - Invocation not allowed

Encountering the Javascript error "Uncaught TypeError: Illegal invocation" while executing the code var nativeGeoloation = window.navigator.geolocation.getCurrentPosition; nativeGeoloation(function (){ alert("ok")}); Despite attempting to call the code w ...

Issues with the Textarea StartsWith Function Being Unresponsive

Attempting to use the startsWith function on a textarea, but it seems like there may be an error in my code. Since I am not well-versed in Javascript, please forgive any obvious mistakes. I did try to implement what made sense to me... View the Fiddle here ...

Merge two separate Vue applications into one cohesive application

I have developed two separate Vue apps independently from each other. User Interface Admin Interface Each app has its own routes, store, configs, etc. I came across this helpful comment here which discusses treating each app as a component within a mai ...