Question

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

除了按下其中一个添加/删除按钮（触发某些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没有重置或保留当前选定的角色？

Answer 1

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

$("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 multiselect代码重置其他表单字段

1 个答案: