Question

我有一个课程名称列表，我希望我的用户为每个人选择他们的偏好顺序。所以说我们有3门课程，每门课程都有一个下拉列表，可以选择“第一选择”，“第二选择”，“第三选择”。

现在这是我坚持的一点。为了论证，可以说默认选项是按照它们出现的顺序选择，即顶级课程的下拉菜单设置为“第一选择”，中间课程下拉菜单设置为“第二选择”和底部课程被设置为'第三选择'。

如果用户将中间课程更改为“第一选择”，则顶级课程的下拉菜单应自动更改为“第二选择”，底部课程将保留为“第三选择”。

如果用户随后将底部课程的下拉菜单更改为“第一选择”，则中间课程的下拉菜单将更改为“第三选择”，而顶级课程的下拉菜单将保留为“第二选择”。

下面是帮助解释流程的图表。因此，用户每次更改哪个课程是他们的“第一选择”。

Choices flow diagram

这是任何JQuery之前的基本html

<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

试试这段代码：

您需要将data-value添加到下拉列表以存储以前选择的值

<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 - 绑定change事件以选择框并执行所需的计算

$(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

Answer 2

我找到了一个名为selectPool的插件，可以满足我的需求：
https://github.com/meritec/jquery-select-pool

我已经整理了一个演示，包括一个原始插件无法修复的修复程序。我将$ this从this.filter("select");更改为$('select',this);
http://jsfiddle.net/XuZa2/

选择后，JQuery选择重新排序选项

2 个答案: