jquery multiselect code重置其他表單字段

Question

我有一個分配/撤銷角色頁面，提供一個選擇字段來選擇角色和兩個多選字段來包含當前未分配或分配的用戶。兩個按鈕允許您在「分配」和「撤銷」多選字段之間移動用戶。最後，兩個提交按鈕允許您保存或取消您的更改。

除了按下其中一個添加/刪除按鈕（該按鈕觸發某些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的有移動multiselects和第三功能突出顯示所有條目之間的選擇項兩個功能在多重選擇上，這樣來自多重選擇的所有數據都可以通過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"); 
});