HTLM:
<ul>
  <li onclick="this.parentNode.removeChild(this);"> <input type="hidden" name="ingredients[]" value="Cheese" /> Cheese </li>
  <li onclick="this.parentNode.removeChild(this);"> <input type="hidden" name="ingredients[]" value="Ham" /> Ham </li>
  <li onclick="this.parentNode.removeChild(this);"> <input type="hidden" name="ingredients[]" value="Mushrooms" /> Mushrooms </li>
</ul>

<select onchange="selectIngredient(this);">
  <option value="Cheese">Cheese</option>
  <option value="Olives">Olives</option>
  <option value="Pepperoni">Pepperoni</option>
  ...
</select>

JS:
function selectIngredient(select)
{
  var option = select.options[select.selectedIndex];
  var ul = select.parentNode.getElementsByTagName('ul')[0];
  var choices = ul.getElementsByTagName('input');
  for (var i = 0; i < choices.length; i++)
  if (choices[i].value == option.value) return;

  var li = document.createElement('li');
  var input = document.createElement('input');
  var text = document.createTextNode(option.firstChild.data);
  
  input.type = 'hidden';
  input.name = 'ingredients[]';
  input.value = option.value;

  li.appendChild(input);
  li.appendChild(text);
  li.setAttribute('onclick', 'this.parentNode.removeChild(this);');
  ul.appendChild(li);
}

SKRYPT:

$(document).ready(function (){
function find( heap, needle )
{
    var b = 1;
    $( heap ).each(function(){
        if ( $( this ).text() == needle ) b = 0;
    });

    return b ? true : false;
}

function addNode( parent, nodeText )
{
    var newLi = document.createElement( "li" );
    var newInput = document.createElement( "input" );
    $( newLi ).text( nodeText ).addClass('food').on( 'click', function(){ $( this ).remove(); } );
    $( newInput ).attr('type','hidden').attr('value',nodeText).attr('name',nodeText);

    $( parent ).append( newLi );
    $( newLi ).append( newInput );
}

$(document).ready(function (){

    $( '.food' ).click(function(){
        $( this ).remove();
    });

    $( '#foodMenu' ).change(function(){
        var food = $( this ).val();

        switch( food )
        {
            case 'all':
                $( '#foodMenu option' ).each( function(){
                    var nodeName = $( this ).val();
                     if ( nodeName != 'all' && nodeName != 'nothing' && find( '.food', $( this ).text() ) )
                     {
                         addNode( '#foodList', $( this ).text() );
                     }
                });
                break;
            case 'nothing':
                $( '#foodList li' ).each( function() { $(this).remove(); } )
                break;
            default:
                if ( !find( '.food', food ) ) return false;
                addNode( '#foodList', food );
        }
    });

});
});


HTML:

<form method="post" action="">
<ul id="foodList">
        <li class="food">Cheese</li>
        <li class="food">Ham</li>
        <li class="food">Mushrooms</li>
    </ul>

    <select id="foodMenu">
        <option value="all">All</option>
        <option value="nothing">Nothing</option>
        <option value="Cheese">Cheese</option>
        <option value="Olives">Olives</option>
        <option value="Pepperoni">Pepperoni</option>
    </select>
<input type="submit">
</form>