Multiselect , Tags , Autosuggest using core javascript DOM element

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)

var li = document.createElement(‘li’);
var input = document.createElement(‘input’);
var text = document.createTextNode(;

input.type = ‘hidden’; = ‘ingredients[]’;
input.value = option.value;

li.setAttribute(‘onclick’, ‘this.parentNode.removeChild(this);’);

</script> <ul>

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



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s