Using JavaScript to enhance and highlight specific items in a dropdown menu

Question

Using JavaScript to enhance and highlight specific items in a dropdown menu

I am looking for a solution to prevent duplicate selections in multiple select dropdowns. I want to alert the user if they have chosen the same value in more than one dropdown. Should I assign different IDs to each dropdown or is it possible to use just one ID for all of them? The duplicated selection should be highlighted in red.

<form method="post" action="">
<select name="drop1" id="drop1" onchange="checkDropdowns()">
<option value=" " selected="selected"> </option>
...

My JavaScript function is as follows:

function checkDropdowns()
 {
  var iDropdowns = 4;
  var sValue;
  var sValue2;
for(var i = 1; i <= iDropdowns; ++i)
{
    sValue = document.getElementById('drop' + i).value;
    ...
} 
return true;
 }

I seem to be encountering an issue with my implementation. Any guidance or suggestions would be greatly appreciated.
For reference, here is my Fiddle

javascript

Answer 1

Answer №1

Alright, let's go with plan B this time. The previous attempt was filled with nonsense. This approach involves using an array to store used values and then checking if the next Select's value is in that array. Much simpler, right?

function validateDropdowns(){

var numOfDropdowns = 4,
    dropdownValue,
    usedValues = new Array();

for(var i = 1; i <= numOfDropdowns; i++)  {
    dropdownValue = document.getElementById('drop' + i).value;
    if (dropdownValue && usedValues.indexOf(dropdownValue) !== -1) {
        document.getElementById('drop' + i).style.backgroundColor="#cc0000";
    }
    else {
        usedValues.push(dropdownValue);
        document.getElementById('drop' + i).style.backgroundColor="#fff";
    }

} 
}

Answer 2

Alright, let's go with plan B this time. The previous attempt was filled with nonsense. This approach involves using an array to store used values and then checking if the next Select's value is in that array. Much simpler, right?

function validateDropdowns(){

var numOfDropdowns = 4,
    dropdownValue,
    usedValues = new Array();

for(var i = 1; i <= numOfDropdowns; i++)  {
    dropdownValue = document.getElementById('drop' + i).value;
    if (dropdownValue && usedValues.indexOf(dropdownValue) !== -1) {
        document.getElementById('drop' + i).style.backgroundColor="#cc0000";
    }
    else {
        usedValues.push(dropdownValue);
        document.getElementById('drop' + i).style.backgroundColor="#fff";
    }

} 
}

Answer 3

Answer №2

function checkDuplicates(element){
    var isDuplicate = false;
    document.querySelectorAll("select").forEach(function(selectElement){
        if (element != selectElement && element.value == selectElement.value){
            isDuplicate = true;
        }   
    });
    element.style.border  = isDuplicate ? "1px solid #f00" : "inherit";  
}

This is my recommended approach - make sure to include 'this' as a parameter in all your inline event calls.

Answer 4

function checkDuplicates(element){
    var isDuplicate = false;
    document.querySelectorAll("select").forEach(function(selectElement){
        if (element != selectElement && element.value == selectElement.value){
            isDuplicate = true;
        }   
    });
    element.style.border  = isDuplicate ? "1px solid #f00" : "inherit";  
}

This is my recommended approach - make sure to include 'this' as a parameter in all your inline event calls.

Using JavaScript to enhance and highlight specific items in a dropdown menu

Answer №1

Answer №2

Similar questions

Keep an ear out for updates on object changes in Angular

Is there a way to view Deno's transpiled JavaScript code while coding in TypeScript?

Retrieve the element by clicking on its individual tooltip

Create a compressed package of a Vue project that can easily be inserted into a Blogger blog post as a single HTML file

Add a variety of parameters to the URL in order to make an AJAX request

Is it possible to modify the sub/child divs within a draggable parent div and assign them a different class?

Instructions for activating and deactivating a numerical input field with a checkbox

Create your own AngularJS directive for displaying or hiding elements using ng-show/ng

Executing a javascript function from PHP when a form is submitted: a comprehensive guide

jQuery DatePicker Not Displaying Calendar

What is the best way to cycle through a nested JS object?

Guide to transforming an embed/nested FormGroup into FormData

Issue with triggering (keyup.enter) in Angular 8 for readonly HTML input elements

Vue.js fails to display multiple uploaded images

Updating an Angular directive with dynamically added ng-module and ng-change attributes

Using jQuery to access the ID of a div and create a custom close button

Firebase onCall function is executing properly, however, it is only delivering {data: null} as the

Unable to assign values to textarea and checkbox in MVC5

I am attempting to establish a connection with the Converge Pro 2 system from Clearone using NodeJS node-telnet-client, but unfortunately, my efforts to connect have been unsuccessful

Strategies for resolving minor validation challenges (Almost complete, just a few finishing touches needed ...)