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.

Choices flow diagram

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>

score 0 · Answer 1 · answered Jul 18 '14 at 09:33

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

Thank you for the code. It look like what I'm after. However, I did manage to get two courses set as '1st option'. You can recreate the issue by first setting course b to '1st choice', then course c to 'first choice' then course b back to '1st choice'. I end up with both course b and c as '1st choice'. — iltdev, Jul 18 '14 at 10:42
because of this sentence "bottom course would remain as '3rd choice'", i thought you want to change previous select option and not next. But yes we can do this. give me some time. — Bhushan Kawadkar, Jul 18 '14 at 10:47
Sorry it's tricky to explain. Basically I need each drop-down selection to be unique. Looking at jsfiddle.net/fx4nz/16 it is still possible to end up with more than one course set to 'first choice' (EDIT: or 2nd and 3rd choice for that matter). It can be seen by setting the courses to '1st Choice' in the following order: course b, course c, course a. Sorry to be a pain. I really appreciate the help you're giving me. — iltdev, Jul 18 '14 at 11:30

score 0 · Accepted Answer · answered Jul 18 '14 at 12:16

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/

JQuery select options reordering after selection

2 Answers2