Help with removing dynamic content from dropdown list

**sdotsen** · 05-31-2008, 03:57 AM

The code below adds and removes an element from a dropdown list. It works to a certain extent, it just fails when you check off more than 1 checkbox. Go ahead and check both boxes and then remove one. It removes the last thing you selected.Javascript isnt my thing so I have no idea where to begin. This is what I have so far.

Link to example

Code:

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function addItem(obj, text, value) { 
  if(obj.checked) { 
    addOption = new Option(text, value); 
    document.myform.DropDownList.options[document.myform.DropDownList.options.length]=addOption; return true; 
  } else if (document.myform.DropDownList.options.length > 0) {

  document.myform.DropDownList.remove(document.myform.DropDownList.options.length-1); 
	} 
} 
    --> 
</SCRIPT> 

<form name="myform" method="post" id="myform"> 
<input name="box1" type="checkbox" value="turnkey" onclick="addItem(this, 'turnkey', 'turnkey');"> Turnkey <br>
<input name="box2" type="checkbox" value="inroom" onclick="addItem(this, 'inroom', 'inroom');"> Inroom<br>
<select name="DropDownList"></select> </form>

**jscheuer1** · 05-31-2008, 06:53 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!-- 
function addItem(obj, t, v) { 

var  sel = obj.form.elements['DropDownList'],
       o = sel.options,
       l = o.length;

  if(obj.checked)
   	    o[l] = new Option(t, v);

  else if (l > 0)
      for (var i = l-1; i > -1; --i)
	if(o[i].text == t && o[i].value == v)
	  sel.remove(i);
	
} 
//    --> 
</script>
</head>
<body>
<form action="" name="myform" method="post" id="myform"> 
<div>
<input name="box1" type="checkbox" value="turnkey" onclick="addItem(this, 'turnkey', 'turnkey');"> Turnkey <br>
<input name="box2" type="checkbox" value="inroom" onclick="addItem(this, 'inroom', 'inroom');"> Inroom<br>
<select name="DropDownList">
<option value="" selected>Choose</option>
</select>
</div>
</form>
</body>
</html>

**sdotsen** · 05-31-2008, 04:23 PM

Thanks so much, do you have any tips for the following?

The checkboxes are static (always 3 checkboxes) but each product is different in a way where Item A has curbside enabled and Item B has all 3 delivery method. These values are stored in the DB, so when it's displayed, the appropriate checkboxes are checked off. I got that working on the PHP side, but now on the JS side of things. For example, Item A has Curbside and Inroom enabled so in the dropdown box, it should list curbside and inroom. In the event that someone unchecks curbside, curbside should be remove.

Is there a way for the JS script to check the current status of a checkbox that you as a user didn't check off (it came from the DB where I scripted a php statement to default the check if it exists).

For example, I checked off "inroom" by default but it doesnt show in the dropdown list.
http://www.kubicle.com/~sam/thunder.html

**jscheuer1** · 05-31-2008, 05:01 PM

Code:

<script type="text/javascript">
<!-- 
function addItem(obj, t, v) { 

var  sel = obj.form.elements['DropDownList'],
       o = sel.options,
       l = o.length;

  if(obj.checked)
   	    o[l] = new Option(t, v);

  else if (l > 0)
      for (var i = l-1; i > -1; --i)
	if(o[i].text == t && o[i].value == v)
	  sel.remove(i);
	
}

window.onload = function(){
var  boxes = document.forms['myform'].elements;
	for (var i = boxes.length-1; i > -1; --i)
	  if (boxes[i].name && /^box\d+$/.test(boxes[i].name))
	    boxes[i].onclick.apply(boxes[i]);
}
//    --> 
</script>

But, if the user refreshes the page, unless your server side code can prevent it, it will come back in most cases with the options they had set. This may or may not be a good thing.

Also, what about non-javascript enabled users? Are they going to be able to make any sense of this form once it gets live for actual commercial use?

Thread: Help with removing dynamic content from dropdown list

Thread Tools

Search Thread

Help with removing dynamic content from dropdown list

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions