1

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

一切正常，除了当您按下一个添加/删除按钮时，它会触发一些 jquery 在多选之间移动突出显示的条目，它最终会将角色选择字段重置为默认（第一个）条目。

该页面看起来像：

<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没有重置或保留当前选择的角色？

4

1 回答 1

2

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

$("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");  
});
于 2012-10-23T01:26:13.473 回答