How to add elements to jquery object
Have a select box. Want to remove selected options, but save them. Can then put them back in later. That works fine in the code below. But any time they are saved, the previously saved ones are wiped out. Haven't been able to figure out how to add new elements to an existing jQuery object. Even when I try to use .add(), it still wipes out the old ones. ???
- <html>
<head>
<script src="jquery.js"
type="text/javascript">
</script>
<script src="jquery.tinysort.js"
type="text/javascript">
</script>
<script>
var hidden_options=$([]);
$(document).ready(function(){
$('input#hide').click(function(){
$(hidden_options).add($('select option:selected').remove().attr('selected',false));
});
$('input#show').click(function(){
$(hidden_options).appendTo('select');
$('select option').tsort();
});
$('input#count').click(function(){
alert($(hidden_options).length);
});
});
</script>
</head>
<body>
<select size="10"
multiple>
<option value="1">
Bird
</option>
<option value="2">
Cat
</option>
<option value="3">
Dog
</option>
<option value="4">
Horse
</option>
<option value="5">
Elephant
</option>
</select>
<br/>
<br/>
<input id="hide"
type="button"
value="Hide">
<input id="show"
type="button"
value="Show">
<input id="count"
type="button"
value="Count">
</body>
</html>