Hi, now we are discussing how to move element between two multi select. First we will create two multi select element.
- <form name=“Example” id=“Example” action=“ ” method=“post” onsubmit=“javascript:test();”>
- <table border=“0″ cellpadding=“3″ cellspacing=“0″>
- <tr>
- <td>
- <select id =“Features” name=“Features[]“ multiple=“multiple”>
- <option value=“2″>Row 2</option>
- <option value=“4″>Row 4</option>
- <option value=“5″>Row 5</option>
- <option value=“6″>Row 6</option>
- <option value=“7″>Row 7</option>
- <option value=“8″>Row 8</option>
- <option value=“9″>Row 9</option>
- </select>
- </td>
- <td align=“center” valign=“middle”>
- <input type=“Button” value=“Add >>” style=“width:100px” id=“add”/>
- <input type=“Button” value=“<< Remove” style=“width:100px” id=“remove”/>
- </td>
- <td>
- <select name=“FeatureCodes[]“ size=“9″ id=“FeatureCodes” multiple=“multiple”>
- <option value=“1″>Row 1</option>
- <option value=“3″>Row 3</option>
- </select>
- </td>
- <td><input type=“text” name=“tt” value=“55″/></td>
- </tr>
- <input type=“submit” name=“submit” value=“submit”/>
- </table>
- </form>
- <script>
- $().ready(function() {
- $(‘#add’).click(function() {
- return !$(‘#all_artist option:selected’).remove().appendTo(‘#selected_atrist’);
- });
- $(‘#remove’).click(function() {
- return !$(‘#selected_atrist option:selected’).remove().appendTo(‘#all_artist’);
- });
- });
- function selectall()
- {
- $(‘#selected_atrist’).find(‘option’).each(function() {
- $(this).attr(‘selected’, ‘selected’);
- });
- }
- </script>
<br>
<br>
<input type=”Button” value=”<< Remove” style=”width:100px” id=”remove”/>
</td>
<td>
<select name=”FeatureCodes[]” size=”9″ id=”FeatureCodes” multiple=”multiple”>
<option value=”1″>Row 1</option>
<option value=”3″>Row 3</option>
</select>
</td>
<td><input type=”text” name=”tt” value=”55″/></td>
</tr>
<input type=”submit” name=”submit” value=”submit”/>
</table>
</form>
<script>
$().ready(function() {
$(‘#add’).click(function() {
return !$(‘#all_artist option:selected’).remove().appendTo(‘#selected_atrist’);
});
$(‘#remove’).click(function() {
return !$(‘#selected_atrist option:selected’).remove().appendTo(‘#all_artist’);
});
});
function selectall()
{
$(‘#selected_atrist’).find(‘option’).each(function() {
$(this).attr(‘selected’, ‘selected’);
});
}
</script>
