Need a jquery script that shifts selected options from selectboxes based on current selection by end user

Question

I have an HTML page enabling end users to rank our projects over select box elements.

Please see the fiddle to see a simple demonstration:

https://jsfiddle.net/Balkanlii/ghecv1j8/1/

I want to build a jquery script that shifts the selected options in case the same rank is selected for the second time (in case the end user changes their mind etc.). So:

• Assume Project 1 is selected as the first ranked, then when the end user comes to Project 2 and decides to set this project as the first one, so he should only select the option 1 here and the other project should be set into rank 2 automatically.

• Assume Project 1 is selected as the first ranked, and Project 2 is selected for the second ranked. Then, say when the end user checks Project 3, he decides to set is as the first ranked. Once he does that, Project 1 should be second, Project 2 should be third ranked automatically.

I have built a query that works successfully for this purpose, however the script is broken for a condition like:

• Assume Project 1 is selected as the second ranked, then the Project 2 is selected as the first ranked. This is causing the Project 1 is auto-ranked into the third rank where there is actually no second ranked project.

How can I fix it?

Also, is there any better approach then my approach I am wondering as it goes more and more complicated how I have done it.

Any help would be appreciated.

My jQuery script so far:

var previousValue = 0;
$("select[class='myclass']").on('focusin', function(){
     previousValue = $(this).val();
});

$("select[class='myclass']").on('change', function (event) { 
    var prevValue = parseInt(previousValue);
    var selectedValue = parseInt($(this).val());
    var selectedId = $(this).attr('id');

    $('#' + selectedId + " option").removeAttr("selected");
    $('#' + selectedId + " option[value=\""+selectedValue+"\"]").attr('selected', true);

    $("select[class='myclass']").each(function (index, element) { 
           var eval = parseInt($('#' + element.id).val());
            if (prevValue !== 0 && selectedValue !== 0) {
                if (eval >= selectedValue && (eval < prevValue) && element.id !== selectedId) {
                       var b = eval + 1;
                        if (b <= 3)
                            $('#' + element.id).prop('selectedIndex', b);
                        $('#' + element.id + " option").removeAttr("selected");
                        $('#' + element.id + " option[value=\"" + b + "\"]").attr('selected', true);

                }
                else if (eval <= selectedValue && (eval > prevValue) && element.id !== selectedId) {
                       var b = eval - 1;
                       $('#' + element.id).prop('selectedIndex', b);
                       $('#' + element.id + " option").removeAttr("selected");
                       $('#' + element.id + " option[value=\"" + b + "\"]").attr('selected', true);
                            }
                }
                else if (prevValue == 0) {
                            if (selectedValue > 0) {
                                if (eval >= selectedValue && element.id !== selectedId) {
                                    var b = eval + 1;
                                    if (b <= 3) {
                                        $('#' + element.id).prop('selectedIndex', b);

                                        $('#' + element.id + " option").removeAttr("selected");
                                        $('#' + element.id + " option[value=\"" + b + "\"]").attr('selected', true);
                                    }
                                }
                            }
                }
        });
 });

Answer 1

You could do something like the below which disables the selected option in the other fields. Here's a screen recording of it working...

(function($) {

  const $all = $('select.myclass');
  
  $all.on('change input', function() {

    $all.find('option[disabled]').prop('disabled', false);
    
    $all.each(function() {
      const $this = $(this);
      const value = $this.val();
      
      $all.not($this).find(`option[value="${value}"]`)
        .prop('selected', false)
        .prop('disabled', !!parseInt(value));
    });
  });

})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>Project 1</b>
<select class="myclass" name="ddl1" id="ddl1">
  <option value="0"> </option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select><br />

<b>Project 2</b>
<select class="myclass" name="ddl2" id="ddl2">
  <option value="0"> </option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select><br />

<b>Project 3</b>
<select class="myclass" name="ddl3" id="ddl3">
  <option value="0"> </option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select><br />