Prevent duplicate droplist choice

Ok - So I've got a start on some JavaScript that accomplishes in a sense what I want to do. It compares the two droplists and gives an alert if the values are equal or not equal. In the final product, I'd take the "else" off the JS, since I don't care if they're not equal.

Here's the rub...In order to do it, I have to set a variable for the value of each droplist, then compare the two values with (===). (It also works with "%HTMLNAME%", btw).

var droplist1 = document.getElementById("combo12345id").value

The JS then compares droplist1 to droplist2 and creates an alert based on whether they are equal or not.

What I'd like to figure out, and am not clear on based on research, to find a way so that the comparison is with all other droplists EXCEPT for itself with some kind of variable. This way, I can run the JS on a button. It'd be awesome if I could get it to work on an onSelectChange, but annoyingly, you can't copy and paste actions to droplists in a question.

I feel like I'm VERY close on this, but just need to get over one more hump. Here's a sample of what I have so far.

Here's a sample with 5 dropdowns.

Page 1 uses plain JS to check wether all dropdowns are populated and whether there are doubles in the selections.

Page 2 does the same, just "On: Select / Change"

It may be a little easier to understand where to put code depending on the situation empty or doubles.

Page 3 uses that jQuery code from stackoverflow

By the way: you can never paste actions to a dropdown that doesn't have actions attached already, but you can paste an action under an existing action and drag the copy to the next dropdown.

Tim, thank you again so much not only for the samples, but also the explanations. I think that was where I got lost with the jquery solution along with the process of creating the array with JS. Does the jquery have to be a meta tag? I'm leery since in previous testing, screen readers sometimes actually read the contents of a meta tag.

I'm going to try adding the function that sets the value of the drop down to Choose another option and possibly a function that checks the droplist values and not allow processing if any droplist is blank OR has "Choose another option". I may just do this with regular actions on the submit button, but if I can "have my cake and eat it, too" it would be much cleaner in the title explorer.

An html extension of the type "Meta tags" is not a undefined tag and due to the type it's added to that part of the html code where you'd expect meta tags.

Edit: I attached a sample with my progress so far so it's not just code to look at.

I'm hoping I can get a little more help on this one. I'm trying to create a "dual" solution" that employees the jquery that gives immediate feedback and the JS that runs onClick to highlight the duplicate and empty drop downs. So, order of operations:

1. If the users selects a duplicate, there is an immediate alert (current jquery) and the duplicates get a red border (current JS with the onClick).
2. When the user clicks a Submit button, the empty drop downs get a yellow border (current JS with onClick).

I've been able to set the button so that only the duplicates are highlighted. However, I'm stumped on how to highlight the duplicates using jquery. I'm REALLY close, though. I am able to get the "currently selected" element only to highlight, but want to try and get the duplicate highlighted, too. Here's what I'm working with in the jquery:

$(document).ready(function () {

$('select').change(function () {

if ($('select option[value="' + $(this).val() + '"]:selected').length > 1) {

var element = $(this).parent(); // this sets the variable to the currently selected drop list or blank?

alert('You have already selected this option previously - please choose another.');

alert(element);

$(element).css("border", "solid red"); // sets the border of all items with class

}

});

});

On a side note, Tim - I'm not able to copy the button or the JS on page 1 to the other pages and get it to work. I was able to copy the jquery from page 3 to the page with the button and it does work. Any thoughts on that?

Take out the issue with copying the button to my course - The drop downs in my course had a different class, so I had to update that in the RunJS for the button. Derp.

So, I made some really significant progress on this and am attaching the result, which is likely to go into the Shared Content section. There is ONE piece I'm still working on, which is the ability to highlight the two duplicated answers instead of just the one that's been selected.

I was able to get the function to run twice. However, it did not highlight the two duplicates and gave the alert twice (I expected the latter to happen). Any ideas on how I can add the border to the duplicates and only have the alert once?

As to the rest, I'm attaching my results and will likely get it up to the Shared Content. In a nutshell, I combined the jquery to check for duplicates and the JavaScript to check for and highlight blanks. The JavaScript also sets a variable used in another action to generate an alert or continue processing the submit actions. Basically, I set it up so that the loop in the JavaScript adds or subtracts based on whether or not the drop list value is blank.

The sample includes explanations and the originals from @timk for how to use it on regular drop lists and multiple choice questions that use a drop list and all have the same set of possible answers.

Tim, you are awesome. Between, you Darrel, Math and others, I've learned SO much! If/when we meet up at LUC, I owe you a drink!

I with the new combined sample, I added the line that resets the value last selected to blank so that I can still count the number of blanks for use within Lectora. I'm probably going to pull the disabling from my final course, as, based on some of the reactions to the course, there's a good chance that will confuse a large number of my learners.

The fun part of this has been learning a whole bunch of other new things during research that, even though they didn't work, gave me a tool for something I may do later. A perfect example of how failure = growth!

Good timing, just before I finished my new version

It now adds red borders to both dropdowns with doubles.

I've added a new feature: If there are doubles, all other dropdowns will be disabled until one of the two has been changed to a unique value.

There is no failure, its just a process of constant learning. For all of us. I learn each day, not only by discovering things myself, but also by reading and helping here. Thats what i love most about elearning, as a developer you learn constantly too.

Keep the head away from the desk, you might hit the computer, walls are much better for learning ;-)

@timk - One more bit of help on this, and the answer is going to be a "head-desk" moment I think. In the JavaScript version of the solution (which is what I'm running now on the submit button to check for and highlight blanks), it uses the class to create the array.

I cannot for the life of me remember how to add the class to the drop list, even though it sounds like I did it before.

Ah! I'm just so used to seeing that on the left side, I missed it entirely. Instead of the desk, I'll just face palm.