Multiple select from Select tag to remove text

[Pervex]

Hi,

I have the code , which add the data from input filed to list-box.Now am able to remove individual input's.

I want to have option multiple select to remove the data from list box .

<form id="frm" action="" method="post">
  Select list:<br/>
  <select name="sel_list" id="sel_list" size="2" onchange="adOption.selOpt(this.value, 'optval')"></select><br/><br/>
  Add an option: <input type="text" name="optval" id="optval" /><br /><br/>
  <input type="button" id="addopt" name="addopt" value="Add Option" onclick="adOption.addOption('sel_list', 'optval');" />  
  <input type="button" id="del_opt" name="del_opt" value="Delete Option" onclick="adOption.delOption('sel_list', 'optval');" />
</form>
<script type="text/javascript"><!--
var adOption = new Object();
  adOption.checkList = function(list, optval) {
    var re = 0;     
    var opts = document.getElementById(list).getElementsByTagName('option');

    for(var i=0; i<opts.length; i++) {
      if(opts[i].value == document.getElementById(optval).value) {
        re = 1;
        break;
      }
    }
    return re;    
   };
  adOption.addOption = function(list, optval) {
    var opt_val = document.getElementById(optval).value;
    if(opt_val.length > 0) {
      if(this.checkList(list, optval) == 0) {
        var myoption = document.createElement('option');
        myoption.value = opt_val;
        myoption.innerHTML = opt_val;
        document.getElementById(list).insertBefore(myoption, document.getElementById(list).firstChild);

        document.getElementById(optval).value = ''; 
      }
      else alert('The value "'+opt_val+'" already added');
    }
    else alert('Add a value for option');
  };
  adOption.delOption = function(list, optval) {
    var opt_val = document.getElementById(optval).value;
    if(this.checkList(list, optval) == 1) {
      var opts = document.getElementById(list).getElementsByTagName('option');
      for(var i=0; i<opts.length; i++) {
        if(opts[i].value == opt_val) {
          document.getElementById(list).removeChild(opts[i]);
          break;
        }
      }
    }
    else alert('The value "'+opt_val+'" not exist');
  }
  adOption.selOpt = function(opt, txtbox) { document.getElementById(txtbox).value = opt; }
--></script>

How can I do this ....?
Please Help

Thank You
Pervez

[Taywin]

I want to have option multiple select to remove the data from list box

Please clarify this sentence. Do you mean you want the select box to become multiple selection, and then remove all of those selected options? Or else???

[Pervex]

Hey Taywin,

Yeah, excatly I want to perform this task as you told.And I also wann process those data to backend.

please help
pervez

[Taywin]

To allow a select tag to be able to select multiple option, you just need to add a property "multiple" and you should give a size value to the tag as well for visibility as <select multiple="multiple" size=4> ... </select>.

If you are going to process in the backend for selection, you need to work with AJAX. You need to read up about it. A couple tutorials came up from Google search as here and here. That should be the basic idea of what you need to do.