How to select multiple input to remove from the list

[Pervez]

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 .
Am not able to process all the data whichever are present in select tag


CODE:

<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');" /> &nbsp; 
  <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

[VIPStephan]

If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

[sunfighter]

FYI: if you hit "enter" after typing a name into the input box, it disappears from that box and completely removes every name in the select list. Not a good thing.

[xelawho]

generally speaking you loop through the options (using a reverse for loop) and if the option is selected, remove it.

if you need more detail, feel free to ask.

[Pervez]

Hi ,

Sorry I didn't get you. can u bit clear about this ......?

And also I wanna process this select list to back end for further process .How can I add multiple data to select list at a time and process this .......?

Thank You
Pervez

[shyagrawal]

you have to add "multiple" in the select tag to select multiple value. As I have added below:
<select multiple name="sel_list" id="sel_list" size="2" onchange="adOption.selOpt(this.value, 'optval')"></select><br/><br/>

Also, you have to update your delete function. Please see below:
adOption.delOption = function(list, optval) {
var opts = document.getElementById(list).getElementsByTagName('option');;
for(var i=opts.length -1; i >= 0 ; i--) {
if(opts[i].selected == true) {
document.getElementById(list).removeChild(opts[i]);
}
}
}

Let me know is this you want?

[Pervez]

Hi shyagrawal,

Thank You for your response.

When I update my code as you told , the list box not taking input from input filed .

And also i wann process all those list box items to back-end.

Please Help

Thank You
Pervez

[shyagrawal]

use below code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--< html xmlns="http://www.w3.org/1999/xhtml"> -->
<h1>
Pizzeria</h1>
<p>
&nbsp;</p>
<p>
<b>Name:</b>&nbsp;
<input id="txtName" type="text" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>Pickup:</b>
<input id="rdbPickUp" name="DeliveryMethod" type="radio" value="PickUp" />&nbsp;&nbsp;&nbsp;<b>Delivery:</b>
<input id="rdbDelivery" name="DeliveryMethod" type="radio" value="Delivery" /></p>
<p>
<!-- create ddl for style and size-->
<!-- make ddl have a set value-->
<b>Style:</b> &nbsp; &nbsp;
<select id="ddlStyle">
<option selected="selected">Choose Style</option>
<option value="empty"></option>
<option value="deepDish">Deep Dish</option>
<option value="TomatoPie">Tomato Pie</option>
<option value="ThinCrust">Thin Crust</option>
<option value="Stuffed Crust">Stuffed Crust</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>Size:</b>
<select id="ddlSize">
<option selected="selected">Choose Size</option>
<option value="empty"></option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="XLarge">Xtra Large</option>
<!-- <option value="other">Other value</option>-->
</select></p>
<p>
<!-- Toppings:
<select id="investment1" <optgroup="" label="" name="investment0">
<option value="1000">$1,000</option>
<option value="5000">$5,000</option>
<option value="10000">$10,000</option>
<option value="25000">$25,000</option>
<option value="other">Other value</option>
</select></p>-->
<p>
<b>Toppings: </b>&nbsp; <input id="chkPepperoni" type="checkbox" value="Pepperoni"/><b>&nbsp;Pepperoni: </b>
<input id="chkBlkOlives" type="checkbox" value="Black Olives"/><b> Black Olives: </b>
<input id="chkMeatball" type="checkbox" value="Meatballs"/><b>Meatballs: </b>
<input id="chkSausage" type="checkbox" value="Sausage"/><b> Sausage: </b>

<p>
&nbsp;</p>
<p>
&nbsp;<input id="btnConfirmOrder" type="button" value="Confirm Order" onclick="ConfirmOrder();"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;
<input id="btnClrFrm" type="button" value="Clear Form" onclick="this.form.reset()" /></p>
<!-- //does this work? -->
<p>
<textarea id="txtArea" rows='10' cols='40' disabled='disabled'></textarea></p>
<p>
&nbsp;</p>
<script language="javascript" type="text/javascript">


var $ = function (id) {
return document.getElementById(id);

}

function () {

//get buttons and assign a funtion to its onclick

$("btnConfirmOrder").onclick = ConfirmOrder;

$("btnClrFrm").onclick = ClrFrm;


}
function ConfirmOrder() {

//alert 
var message = "You have ordered the following:\n\n";

//test the toppings checkboxes
//display the checked toppings in textbox

if ($("chkPepperoni").checked) {
message +=" - " + $("chkPepperoni").value + "\n";
}
if ($("chkBlkOlives").checked) {
message +=" - " + $("chkBlkOlives").value + "\n";
}
if ($("chkMeatball").checked) {
message +=" - " + $("chkMeatball").value + "\n";
}
if ($("chkSausage").checked) {
message +=" - " + $("chkSausage").value + "\n";
}

//confirm to user what they have accepted
//confirm(message)

$("txtArea").value = message;

}

</script>
<!--</body>-->
</html>

[Pervez]

Hi shyagrawal,

Thank You for your response.

When I update my code as you told , the list box not taking input from input filed .

And also i wann process all those list box items to back-end.

Please Help

Thank You
Pervez

[shyagrawal]

Please correct my understanding. You want to delete entered text from the select list, right?
For Example, If you enter "test" in the text box and "test" is present in list box, then you want to delete that option from select box, right? In that case, you can delete only options whose value is "test" in the select list.