jquery multiselect 코드 다른 양식 필드 재설정

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"); 
});