php - 选择框中的值一旦单击就无法选择

Question

我做了一个技能选择框..里面列出了技能..如果我们选择它一次，它将被添加到 DIV 中..n 我想要的第一件事是它不能再次选择选择框，如果一旦它存在于 DIV 中......n div 中有一个“x”......如果它被点击......那个 div 将被删除......现在我的意思是。我想要的第二件事是当通过单击“X”删除DIV的值时......选择框中的相同值将再次出现（我们可以选择它（启用））......

这是我在这个 tuts 中使用的 javascript..

  <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 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 } ?> 

这是单击它们后我的选择框值出现的div...

<div id="div"></div> 

Answer 1

你想要这样的东西吗：http: //aloksah.org/listbox/listbox.html

jQuery代码：

// 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();
    });
}