A value in select box can't be select if once clicked - php

Question

i hava made a select box of skills..there are skills listed in it.. if we select it once it will be added out side in a DIV..n the first thing what i want is it can't be select again in the select box if once it's there in DIV...n there's a 'x' there in div..if it's clicked..that div will b deleted...
now my point is. the second thing what i wnt is when the value of DIV is deleted by clicking on 'X'...the same value of it in the select box will b live again(we can select it(enabled))...
This is the javascript i used in this tuts..
<script type="text/javascript">
var i=0;
function generateTextbox(){
if(i<5){
var d=document.getElementById("div");
var skilldiv=document.getElementById("skill").value;
d.innerHTML+="<div>"+skilldiv+"<a class='close_notification' onclick='this.parentNode.parentNode.removeChild(this.parentNode); '>X</a></div>";
i=i+1;
}
}
</script>
select box values come dynamically..
<select id="skill" name="skill" multiple="multiple" style="float:left; height:160px; width:375px;" onchange="generateTextbox();">
<?php foreach ( $fivesdrafts as $fivesdraft )
{
$fivesdraft->skill_name;
$fivesdraft->skill_id;
?>
<option value="<?php echo $fivesdraft->skill_name; ?>" onclick="this.disabled='disabled';" > <?php echo $fivesdraft->skill_name; ?></option>
<?php } ?>
</select>
}
</script>
<?php } ?>
And this is the div where my select box values come after click on them...
<div id="div"></div>

Answer 1

Do you want something like this: http://aloksah.org/listbox/listbox.html
jQuery Code:
// function: UnAssignment
function assignList()
{
// loop through first listbox and append to second listbox
$('#firstList :selected').each(function(i, selected){
// append to second list box
$('#secondList').append('<option value="'+selected.value+'">'+ selected.text+'</option>');
// remove from first list box
$("#firstList option[value='"+ selected.value +"']").remove();
});
}
// function: UnAssignment
function unassignList()
{
// loop through second listbox and append to first listbox
$('#secondList :selected').each(function(i, selected){
// append to first list box
$('#firstList').append('<option value="'+selected.value+'">'+ selected.text+'</option>');
// remove from second list box
$("#secondList option[value='"+ selected.value +"']").remove();
});
}