Numerical order in dropdown menu

There are 3 select dropdowns and I want the following scenarios to occur:

  1. If I select 1 in dropdown1, then the other values should be 2 and 3.

Dropdown1: 1

Dropdown2: 2

Dropdown3: 3

https://i.sstatic.net/078H4.png

  1. If I select 1 in dropdown2, then the other values should be:

Dropdown1: 3

Dropdown2: 1

Dropdown3: 2

https://i.sstatic.net/K7iN2.png

  1. The configuration should be like this:

Dropdown1: 2

Dropdown2: 3

Dropdown3: 1

https://i.sstatic.net/LDN4e.png

Visit CodePen for more details.

<body ng-app="my-app" ng-controller="my-controller">
  <select class="form-control" ng-options="obj as obj.title for obj in sequence" ng-model="selectedView1"></select>
    <select class="form-control" ng-options=" obj.title for obj in sequence" ng-model="selectedView2"></select>
    <select class="form-control" ng-options=" obj.title for obj in sequence" ng-model="selectedView3"></select>
</body>

For further information, please check out the CodePen link above.

Answer №1

Implemented a new feature where selecting 1 in the first box dynamically changes other select boxes.

Check out the implementation here.

The use of the `watch` function allows for automatic updates to the other select boxes upon selection change.

$scope.$watch('selectedView1', function(newValue) {
    if (newValue && newValue.title === 1) {
      $scope.selectedView2 = $scope.sequence[1];
      $scope.selectedView3 = $scope.sequence[2];
    }
});

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

JavaScript, detecting repeated characters

I need to create a script that checks an input box (password) for the occurrence of the same character appearing twice. This script should work alongside existing regex validation. I believe I will need to use a loop to check if any character appears twice ...

The table element fails to display in IE11 due to a rendering issue, displaying the error message: "Render error - TypeError: Object does not support the property or method 'entries'"

As someone new to web app development, I am currently working on a project that involves using Vue cli and antd components, with the additional challenge of ensuring compatibility with IE11. However, I have encountered an issue where IE11 does not render ...

Guide on extracting unique identifiers from an array of objects and sorting them by the earliest date in JavaScript

I've got an array of objects and I'm looking to retrieve the items with unique IDs while also selecting the earliest date. For example: [{id:1, date: Jan 12}, {id:2, date: Feb 8}, {id:3, date: Feb 8}] var array = [{id: 1, date: Jan 12 2021 08:00 ...

Equality and inequality in arrays

Could someone help clarify why these comparisons between different JavaScript arrays result in true? ["hello"] !== ["world"] [42] !== [42] ["apple"] != ["orange"] [7] != [7] ...

Struggling to access content with Protractor Promise callbacks. What is the best approach for invoking methods on the returned item?

Upon hitting the debugger in the code snippet below, the value of 'thing/item' shows as empty (refer to the image). it('CheckAllLinks:', function () { browser.ignoreSynchronization = true; browser .findElements(by.tagNa ...

Issue encountered when attempting to update a specific element within an array using Mongoose

Looking to update a specific object within an array. { "_id": "543e2f8e769ac100008777d0", "createdDate": "2014-10-15 01:25 am", "cancle": false, "eventDateAndTime": "2014-02-12 12:55 am", "eventstatus": true, "userPhone": "44444444 ...

The challenge with our unique PHP/JS Analytics Solution

Here's an illustration of the code snippet for Google Analytics: <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'userIDhere']); _gaq.push(['_trackPageview']); _gaq.push([&apos ...

Display the list items when the page first loads

I currently have this code snippet: <nav> <ul class="sel"> <li> <a href="#LINK1" data-title="A">A</a> </li> <li> <a href ...

Employing live labels on a Morris Bar Chart

I'm using the Morris Bar Chart to showcase the sales of different products. To enhance user experience, I want to display dynamic labels when hovering over the bars. The data is being fetched through PHP. array('product' => $row['pr ...

How to Apply a CSS Class to the Body Tag in Angular 2.x

How can I add [class.fixed]="isFixed" to the body tag when Angular 2.x is bootstrapped inside the body (outside my-app)? <html> <head> </head> <body [class.fixed]="isFixed"> <my-app>Loading...</my-app> </body> & ...

Obtaining the calculated background style on Firefox

Back when my userscript was only functional on Chrome, I had a setup where I could copy the entire background (which could be anything from an image to a color) from one element to another. This is how it looked: $(target).css('background', $(so ...

a guide on retrieving FormData objects in PHP

Hey everyone, I have a question regarding a sample code snippet I posted here. In this code, I am successfully uploading a file using Ajax JQuery. However, I am struggling to figure out how to read the content of the uploaded file in my PHP code. Can anyon ...

Strategies for evaluating a Promise-returning imported function in Jest

I am currently facing an issue with a simple function that I need to write a test for in order to meet the coverage threshold. import { lambdaPromise } from '@helpers'; export const main = async event => lambdaPromise(event, findUsers); The ...

switch the visibility of the p tag based on its content

It seems like solving this shouldn't be too challenging, but I'm still learning when it comes to Javascript or JQuery. HTML: <p><span id="AddLine1Summary"></span>,</p> <p><span id="AddLine2Summary"></span& ...

Get the GET parameters without changing the '+' sign to "" ""

One of the API providers I work with sends me a unique token in its responses. The token is typically in this format: SomE73ThiL1k3T+ashR To send this token from my AngularJS front end to my Django back end using $resource, I do the following: var res = ...

The Electron BrowserWindow turns dark post execution of the .show() method

Revision: After some tinkering, I discovered that the issue was related to the order in which I created the windows. Previously, my code looked like this: app.whenReady().then(() => { createWindow(); spawnLoadingBlockWindow(); spawnGenerati ...

Why is the object not being initialized in a new API call while the string variable is successfully initialized?

There seems to be a basic issue that I am missing, as to why this is happening. GET: example.com/users //returns all data GET: example.com/users?status=1 //returns data with status = 1 GET: example.com/users // this does not work returns the same dat ...

AngularJS fails to recognize Iframe element during REST request

I'm having trouble with my webpage only reading the Iframe tag. It's sending the content correctly according to Postman. Postman is giving me this content: "Conteudo": "<p>Test iframe:</p>\n\n<p><iframe framebord ...

What is the best way to fetch information from an external json api using angularJS?

As an example, I am interested in accessing data from two different URLs: 1- http://jsonplaceholder.typicode.com/posts/ 2- http://jsonplaceholder.typicode.com/todos/ Is it possible to fetch data from these two URLs in a single application using two contro ...

Unable to locate the tag using .find() function following the use of .attr() method

I am currently utilizing jQuery in conjunction with node-horseman to interact with a specific page. My approach involves referencing the page's data-id attribute, which I then pass to my application to search for the li element containing this attribu ...