jquery多选代码重置其他表单字段

我有一个assign/revoke roles页面，该页面提供一个选择字段来选择角色，并提供两个multiselect字段来包含当前未分配或已分配的用户。两个按钮允许您在“分配”和“撤销”多选字段之间移动用户。最后，两个提交按钮允许您保存或取消更改

除了按下其中一个add/remove按钮（触发一些jquery以在多个选择之间移动突出显示的条目）之外，其他操作都可以正常工作，结果是将role select字段重置为默认的第一个条目

该页面看起来像：

<form action="" method="post" name="userroles" id="userroles">
  <table>
    <tr><td colspan="3" align="center"><h2>Assign/Revoke Roles</h2><br />
    Choose Role: 
    <select id="role" name="role">
      <option value="1" selected>Blah</option>
          .
          .
          .
    </select> <input type="submit" name="action" value="Select Role"><br /><br /></td>
    <tr><td colspan="3" align="center">
        Assigning Role:  <strong>Blah</strong></td></tr>
    <tr>
      <th>Unassigned</th>
      <th></th>
      <th>Assigned</th>
    </tr>
    <tr>
      <td><select multiple id="unassigned" name="unassigned" class="multiselect">
      <option value="11111">some</option>
      <option value="22222">people</option>
      <option value="33333">here</option>
      </select></td>
      <td>
    <input type="button" id="add" value="&gt;&gt"><br /><br /><br />
    <input type="button" id="remove" value="&lt;&lt">
      </td>
      <td><select multiple id="assigned" name="assigned" class="multiselect">
      <option value="44444">other</option>
      <option value="55555">people</option>
      <option value="66666">here</option>
      </select></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td align="right">
        <input type="submit" name="action" value="Cancel">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="action" value="Save">
      </td>
    </tr>
  </table>
</form>

jquery如下所示：

<script type="text/javascript">  
  $().ready(function() {  
    $('#add').click(function() {  
      !$('#unassigned option:selected').remove().appendTo('#assigned');
      return $("option:selected").removeAttr("selected");  
    });  
    $('#remove').click(function() {  
      !$('#assigned option:selected').remove().appendTo('#unassigned');
      return $("option:selected").removeAttr("selected");  
    });
    $('form').submit(function() {
      $('#unassigned option').each(function(i) {
        $(this).attr("selected", "selected");
      });
      $('#assigned option').each(function(i) {  
        $(this).attr("selected", "selected");  
      });  
    }); 
  });
</script>

jquery有两个函数可以在多个选择之间移动所选条目，第三个函数可以高亮显示两个多个选择上的所有条目，这样两个多个选择中的所有数据都可以通过POST发回

---

是否仍然可以让jquery不重置或保留当前选定的角色？

添加/删除按钮处理程序调用

$("option:selected").removeAttr("selected");

这将从所有选项（包括顶部的选项）中删除选定项

试试这个

$('#add').click(function() {  
  !$('#unassigned option:selected').remove().appendTo('#assigned');
  return $("#assigned option:selected").removeAttr("selected");  
});  

$('#remove').click(function() {  
  !$('#assigned option:selected').remove().appendTo('#unassigned');
  return $("#unassigned option:selected").removeAttr("selected");  
});

---

“添加/删除”按钮不是“提交”按钮，而是“保存”和“取消”按钮。当我第一次遇到这个问题时，我反复检查以确保它们不是提交按钮。这些按钮仅由jquery脚本处理，并且仅在客户端处理。是的，这与我在jquery.com上得到的答案相同。我正要把答案贴在这里，但你抢先给了我；