0

我有一个课程名称列表，我希望我的用户为每个课程选择他们的偏好顺序。假设我们有 3 门课程，每门课程旁边都会有一个下拉列表，其中包含“第一选择”、“第二选择”、“第三选择”选项。

现在这是我坚持的一点。出于争论的原因，假设默认情况下偏好选择按照它们出现的顺序排列，即顶部课程的下拉菜单设置为“第一选择”，中间课程下拉菜单设置为“第二选择”，底部课程设置为“第三选择”。

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

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

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

选择流程图

这是任何 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>
4

2 回答 2

0

试试这个代码：

您需要添加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()); 
    });
});

演示

于 2014-07-18T09:33:21.530 回答
0

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

我整理了一个演示，包括一个修复，因为原始插件不起作用。我将 $this 从更改this.filter("select");为$('select',this);
http://jsfiddle.net/XuZa2/

于 2014-07-18T12:16:50.610 回答