Utilize the value from one select field to automatically fill in the options for additional select fields

Is there a way to capture the value of one select field and use it to automatically update other select fields? For example, if Volvo is selected in the first field, I would like all others to change to Volvo as well. However, I still want each individual select field to be editable so that I can change any one of them independently, even after they have been updated based on the first selection (e.g., changing one field to Audi while the rest remain Volvo).

TIA

<select>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>

            <select>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>


            <select>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>


            <select>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>;

            <select>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>

javascripthtmlcssangularjsweb-frontend

Answer №1

If you're looking to apply this functionality to only the initial select box, there's a simple solution:

$('select:first').change(function() {
  $('select').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

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

"Incorporate React Redux to dynamically load an endless stream of items in batches of x at a time

In order to efficiently display search results using React - Redux, I want to limit the number of displayed results while maintaining optimal performance. Here is my current approach for getting and displaying the results: handleSubmit(event) { event ...

javascriptreactjsredux

Creating an array like this in JavaScript during an API call using Ajax

"WorkingHours": { "Monday" : { "open" : "10:00 am", "close" :"5:00 pm" }, "Wednesday" : { "open" : "10:00 am", "close" :"5:00 pm" ...

javascriptphpajax

Using the Permissions directive in Angular

Currently, I am developing a Single Page Application (SPA) that interacts with a REST server on the backend. The objective is to create a user interface that is consistent across all roles. For example: On a product page, a guest can view the product and ...

javascriptangularjsangularjs-directive

Can one validate a single route parameter on its own?

Imagine a scenario where the route is structured as follows: companies/{companyId}/departments/{departmentId}/employees How can we validate each of the resource ids (companyId, departmentId) separately? I attempted the following approach, but unfortunate ...

javascriptnode.jstypescriptnestjsclass-validator

Trouble getting CSS transition to work with underline decoration

I am currently working with CSS to apply an underline effect underneath a span element: CSS: .un { text-decoration: none; transition: all .5s ease-in; } .un:hover { text-decoration: underline; } HTML: <span class="un"> Underlined Text ...

htmlcss

What could be causing my ul CSS to function properly in Internet Explorer but fail in Chrome?

Why does my CSS work fine on Internet Explorer but not on Chrome? The formatting doesn't show up in Chrome, appearing plain as if the CSS isn't being applied. It works when I place the css directly inside the head tag of the html, but I need it i ...

htmlcsshtml-lists

Guide to collapsing all menus in an Angular 4 Accordion

I am a beginner with Angular 4 and I have implemented an accordion with the structure of Categories, Groups, and Subgroups. When I click on a category, it displays all the groups within that category. Similarly, when I click on a group, it shows all the s ...

jqueryhtmlcssangularbootstrap-4

Enhance Your Search Bar with Ajax and JQuery for Dynamic Content Updates

My goal is to create a search bar that dynamically loads content, but I want the actual loading of content to start only after the user has finished typing. I attempted a version of this, but it doesn't work because it doesn't take into account ...

javascriptjqueryajaxsearch

What is the best way to synchronize the scale of images with the tempo of a song?

I just started learning CSS, JS, and HTML and I have a question about scaling an image based on a song. Despite searching through YouTube and various forums, I still haven't found a solution. Any help would be greatly appreciated :) Here is the HTML ...

javascripthtmlcsstransformscale

Update the js file by incorporating the import statement

Currently, I am in the process of transitioning to using imports instead of requires for modules. Here is an example of my previous code: const { NETWORK } = require(`${basePath}/constants/network.js`); The content of network.js file is as follows: export ...

javascripttypescriptimport

Dynamic hiding of HTML elements based on select box using data attribute rather than utilizing ID or class

Is there a way to dynamically hide or show a DIV based on the selection made in a dropdown menu, which does not have a unique identifier? The only distinguishable feature is that it has 'Data-type="location"' <div class="bookly ...

javascriptjquery

How to use the window.confirm method to print the HTML tag in an AJAX post

Is there a way to display a confirmation window for users who want to delete data from the database without including HTML tags like <strong> or <br />? I am currently using the confirm() function as follows: var str = document.getElementById ...

javascriptjqueryajax

Utilizing ng-if within ng-repeat for dynamically generated option tags in HTML and AngularJS

I am using AngularJS to create a dropdown menu with select and option tags. The menu is referencing a model and looks like this: <select id="edit-location" class="" ng-model="packageLoc"> <option ng-repeat="x in loc" value="{{ x.locationId }} ...

javascripthtmlangularjsangularjs-ng-repeatangular-ng-if

File not found - please check the required file paths

How do I resolve the address issue within the "require" function in my PHP code? I am receiving an error message that reads: Warning: require (..) failed to open stream: no such file or directory. https://i.sstatic.net/OQvQ6.jpg https://i.sstatic.net/pIR ...

javascriptphphtmlmysql

What is the best way to create a box in the shape of an octagon

Trying to achieve the unique box design shown below using CSS. I researched various resources, such as https://css-tricks.com/examples/ShapesOfCSS/, but encountered an issue with the purple border cutting edges. Attempted using an octagon shape without su ...

htmlcsscss-shapes

JavaScript element styling in a Partial view, experiencing issues with functionality

In the main view, the javascript element is working fine. However, in the partial view it seems to not be functioning even though it is correctly formatted. Any ideas on how to fix this issue? Check out this fiddle for reference: http://jsfiddle.net/bgrin ...

javascriptjqueryasp.net-mvcpartial-viewsasp.net-mvc-partialview

Modify the text style on the fly using React js

Looking to update the styling of the tab text in the navbar, as well as implement functionality where clicking on a tab switches between pages and marks the selected tab as active. Below is the code I've written: Header.js import React from "rea ...

javascriptcssreactjs

Adjust the CSS extension within the about:config settings of Firefox

I've been using the Zotero extension and I want to adjust how TinyMCE handles paragraph spacing. I'm looking to customize the CSS in extensions.zotero.note.css by adding specific CSS rules. The reason I want to make these changes is because I fe ...

htmlcssfirefoxtinymce

What is the best method for inserting every item from a textarea into my database?

I have encountered an issue with the code I am currently using. I have a modified version of this code implemented on another page, where a textbox is used instead of a textarea. Interestingly, the textbox version works perfectly fine. However, on my cur ...

phpmysqlhtmltextarea

How to place a Div element in the middle of a webpage

My webpage background features an image of old Tbilisi, and here is the code I am using: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <style> #links { margin: 0 auto; ...

csshtml