Friday, May 23, 2014

how to assign value one multiple select option to another multiple select option and remove using javascript



This may help you below Example:

 one select option value click to assign other select option.

 
<select name="avail_func" id="avail_func" size="5" style="width: 240px" multiple="multiple" >
<option value="65">Ac (American)</option>
<option value="40">AD (Infrastructures)</option>
<option value="71">Ae (Natural)</option>
</select>
<a href="javascript:void(0);" onclick="addFunc();">Add</a>
<a href="javascript:void(0);" onclick="delFunc();">Remove</a>
<select name="function_id[]" id="function_id" size="5" multiple="multiple" style="width: 240px" >
<option value="0">select one server</option>
</select>

<script>
function delFunc() {
                                var elm = document.getElementById('function_id');
                                while (elm.selectedIndex > -1) elm.options.remove(elm.selectedIndex);
                }
function addFunc() {
                                var elm1 = document.getElementById('avail_func');
                                var elm2 = document.getElementById('function_id');
                for (x=0;x<elm1.options.length;x++)
                 {
                  if(elm1.options[x].selected)
                     {


                           if (elm1.selectedIndex > -1)
                           {
                                   var new_id = elm1.options[x].value;
                                   var new_name =elm1.options[x].text;
                                   var alreadythere = false;
                                   for (i=0; i<elm2.options.length; i++)
                                        if (elm2.options[i].value == new_id)alreadythere = true;
                                        if (! alreadythere) elm2.add(new Option(new_name, new_id));

                            }

                     }
              }
                }

</script>