Changing dropdownlist dynamically with cshtml and javascript

Question

I'm attempting to do something that is a bit out of my wheelhouse here, and I'm hoping primarily to be pointed in the right direction conceptually (of course, code never hurts).

In a cshtml page, I have n number of drop-down lists, each with the values 1, 2, 3... n. I don't want any drop-downs to ever contain the same value as another on the page. I am looking for a way to dynamically do this with Javascript.

Are there any clever ways to do this? I can think of a pretty ugly algorithm involving running through each drop-down every time one of the drop-down lists changes value, looking for any drop-down with the same value, and adding 1 to it (rolling over to 1 if we are at n). Then having to go through again, to change the next list we run across with the same value as the previous. Eventually, we would stop after n times through every list (Run-time O(n^2)). Even if there isn't a clever way of doing this, I can't imagine that is anywhere close to an optimal solution.

Any advice at all would be greatly appreciated. Thanks.

score 1 · Answer 1 · answered Aug 29 '14 at 21:27

Have an array of values in javascript, and every time a dropdown list changes, do this:

Check if the value already exists in the array, blocking the action if it does.
Store the new selection in the array.

There may be more to it (e.g., you may also need to store the value's source dropdownlist ID in the array, too, so you know which value you need to remove if the dropdownlist changes a second time), but this general idea should be simple and efficient.

score 1 · Answer 2 · answered Aug 29 '14 at 21:27

If I understand correctly, it maybe easier than it looks.

I understand you have n (let's say 3) dropdowns, selected at 1, 2, 3 respectively. But if you'd select 3 in the first one, you want to prevent the duplicate 3 with the third dropdown. But you could try to look for this duplicate by value and set its value to the old value of the dropdown you are changing.

E.g. with jQuery: http://www.w3schools.com/jquery/sel_attribute_equal_value.asp

$("[value=3]").attr("value", 1)

This should maintain the state that there are no duplicates, otherwise, you may need to do smart stuff depending on the number of elements found, like setting to unselected.

You by the way also need the suggestion about getting the value of the dropdown before the change. — Pieter21, Aug 29 '14 at 21:47

score 1 · Answer 3 · edited May 23 '17 at 12:05

Use jquery, add a handlers to get the old value and the new value. Then you can enable the old value in all other selects, and disable the new value. This requires some scripting magic, but this post will help: getting value of select dropdown before change

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){

        var valueToEnable;
        var defaultValue = '0';

        $('.theDropdowns').on('focus', function () {
            valueToEnable = this.value;
        }).blur(function() {
            $('.theDropdowns option[value=' + valueToEnable + ']').removeAttr('disabled');
            var valueToDisable = this.value;
            if (valueToDisable != defaultValue) {
                $('option[value=' + valueToDisable + ']', $('.theDropdowns').not(this)).attr('disabled', 'disabled');
            }
        });
    });         
    </script>
</head>
<body>
    <select class="theDropdowns">
        <option value="0">Select a value</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <select class="theDropdowns">
        <option value="0">Select a value</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <select class="theDropdowns">
        <option value="0">Select a value</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</body>

Changing dropdownlist dynamically with cshtml and javascript

3 Answers3