Multiple Values selected of select box - Mostlikers

21 June, 2013

Multiple Values selected of select box

This post make on multiple value select of select box using JavaScript This function using multiple value select
option box and display the value input box just function option value select shows the value in input box function displays.

select



Javascript


 <script type="text/javascript">
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);
}

</script>

HTML



<select class="sel" onchange="selectIngredient(this);">
  <option value="Cheese">Java script function</option>
  <option value="Olives">Web page development</option>
  <option value="Pepperoni">Onclick value xselect</option>
</select>

<ul>
  <li onclick="this.parentNode.removeChild(this);" style="list-style:none;">
  <input type="hidden" name="ingredients[]" value="" />
  </li>
</ul>  

Live Demo:


2 comments:

  1. Hello Sir,


    Help Me...
    I want to use 2 different java script on the same page for a website I'm making. At the moment I can only seem to get one working at a time, but not working both at the same time.
    I have basically zero experience with JavaScript, but I'm guessing I need to some how call both script in the ready event?

    I try to write code here but this msg is show o your site so i give my facebook link where you can see my code clearly..

    You Can see my script on my facebook page..

    https://www.facebook.com/groups/pdvlin/permalink/673217952692646/

    ReplyDelete