JQuery select options reordering after selection

Question

I have a list of course names and I want my users to select their order of preference for each one. So say we have 3 courses, each course would have a drop-down list alongside it, with the options of '1st choice', '2nd choice', '3rd choice'.

Now here is the bit I'm stuck on. For arguments sake lets say the default is for the preference selection to be in the order they appear i.e. the top course's drop-down is set to '1st choice', middle course drop-down is set to '2nd choice' and the bottom course is set to '3rd choice'.

If the user changes the middle course to '1st choice', then the top course's drop-down should automatically change to '2nd choice' and the bottom course would remain as '3rd choice'.

If the user then changed the bottom course's drop-down to '1st choice', the middle course's drop-down would change to '3rd choice' and the top course's drop-down would remain as '2nd choice'.

Below is a diagram to help explain the flow. So the user changes which course is their '1st choice' each time.

Here is the basic html before any JQuery

<ul>
    <li>
       <select>
          <option>1st Choice</option>
          <option>2nd Choice</option>
          <option>3rd Choice</option>
       </select>
        Course a</li>
    <li>
       <select>
          <option>1st Choice</option>
          <option>2nd Choice</option>
          <option>3rd Choice</option>
       </select>
        Course b</li>
    <li>
       <select>
          <option>1st Choice</option>
          <option>2nd Choice</option>
          <option>3rd Choice</option>
       </select>Course c</li>
</ul>

Answer 1

I've found a plugin called selectPool that does what I need:
https://github.com/meritec/jquery-select-pool

I've put together a demo, including a fix as the original plugin didn't work. I changed $this from this.filter("select"); to $('select',this);
http://jsfiddle.net/XuZa2/

Answer 2

Try this code :

You need to add data-value to dropdown to store previously selected values

<ul>
    <li>
       <select data-value="1st Choice">
          <option selected>1st Choice</option>
          <option>2nd Choice</option>
          <option>3rd Choice</option>
       </select>
        Course a</li>
    <li>
       <select data-value="2nd Choice">
          <option>1st Choice</option>
          <option selected>2nd Choice</option>
          <option>3rd Choice</option>
       </select>
        Course b</li>
    <li>
       <select data-value="3rd Choice">
          <option>1st Choice</option>
          <option>2nd Choice</option>
          <option selected>3rd Choice</option>
       </select>Course c
    </li>
</ul>

jQuery - bind change event to select boxes and do the calculations required

$(function(){
    $('select').change(function(){
       var prevVal = $(this).data('value');
       var $prevEle = $(this).closest('li').prev();
       if($prevEle.length==0)
       {
           $prevEle = $(this).closest('ul li:last');
       }

       $prevEle.find('select option').filter(function(){

            if($(this).text() == prevVal)
            {
                $(this).attr('selected',true);
            }
      }); 

       $(this).attr('data-value',$(this).val()); 
    });
});

Demo