1

役割を選択するための選択フィールドと、現在割り当てられていない、または割り当てられているユーザーを含む 2 つの複数選択フィールドを提供する役割の割り当て/取り消しページがあります。2 つのボタンを使用すると、複数選択フィールドの「割り当て」と「取り消し」の間でユーザーを移動できます。最後に、2 つの送信ボタンを使用すると、変更を保存またはキャンセルできます。

追加/削除ボタンの 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 には、複数選択の間で選択したエントリを移動する 2 つの関数と、両方の複数選択のすべてのデータを POST 経由で送り返すことができるように、両方の複数選択のすべてのエントリを強調表示する 3 つ目の関数があります。

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 に答える