Remove Select Options

PHP
1

I’d like to have a form with two Select elements.
The first will have a classic fixed list of about 6 Options.
I’d like to populate the second with the correct subset of Options that should apply to the user’s selection in the first Select. (Like Parent-Child data).

I think I’ve got this going in fresh, but if the user goes back a changes his selection on the first Select, how can I remove the original options on the second select? (I think I can add the “new” correct options, but they will be added to those already there).

2

It looks like it is javascript question.
Because with PHP implementation there will be no such problem.
second select filled based on the GET parameter, so, as soon we change first selection, we have our page reloaded, with second select filled with corresponding data

3

I guess I was trying to do this without reloading the page. But I may have to do that. Can I force a reload of the page from the Onchange event of the Select? Can a Header be put there? At least it’s the first entry on the form, but I’ll probably discard any other entries the user may have made.

4

You will need to use ajax

5

You don’t necessarily need to use AJAX or JavaScript data manipulation if you can deal with reloading the page.


<?php
$arrOptions = array(
	array(	
		'output'=>'Pick Option'
		,'value'=>''
	)
	,array(	
		'output'=>'Size'
		,'value'=>34
		,'options'=>array(
			'output'=>array('Choose Size','All','XS','L','M','L','XL')
			,'values'=>array(-1,0,1,5,6,89,43)
		)
	)
	,array(	
		'output'=>'Color'
		,'value'=>45
		,'options'=>array(
			'output'=>array('Choose Color','All','Red','Blue','Green')
			,'values'=>array(-1,0,56,98,12)
		)
	)
);

$intOption1 = -1;
$intOption2 = -1;

if(isset($_POST['options'])) {
	$intOption1 = isset($_POST['options'][0]) && is_numeric($_POST['options'][0])?$_POST['options'][0]:$intOption1;
	$intOption2 = isset($_POST['options'][1]) && is_numeric($_POST['options'][1])?$_POST['options'][1]:$intOption2;
}

if(isset($_POST['reset'])) {
	list($intOption1,$intOption2) = array(-1,-1);
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Options Example</title>
	<script type="text/javascript">
		window['onload'] = function() {
			(function() {
		
				var objOptions = document.getElementById('frmOptions');
				if(!objOptions) return;
				
				// remove inputs
				arrInputs = objOptions.getElementsByTagName('input');
				for(var i=0;i<arrInputs.length;i++) {
					arrInputs[i].parentNode.parentNode.removeChild(arrInputs[i--].parentNode);
				}
				
				objOptions['onchange'] = function(objEvt) {
				
					var objEvt = objEvt || event;
					var objTarget = objEvt.target || objEvt.srcElement;

					if(objTarget.nodeName == 'SELECT') { 
						objOptions.submit();
					}
				};
			})();
		}
	</script>
</head>
<body>
<div id="container">
<form id="frmOptions" name="frmOptions" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
	<fieldset>
		<legend>Options</legend>
		<ul>
			<li>
				<select name="options[]">
					<?php
					foreach($arrOptions as $arrOption) {
						printf(
							'<option value="&#37;s"%s>%s</option>'
							,$arrOption['value']
							,$intOption1 == $arrOption['value']?' selected="selected"':''
							,htmlentities($arrOption['output'])
						);
					}
					?>
				</select>
			</li>
			<?php if($intOption1 != -1) { ?>
			<li>
				<select name="options[]">
					<?php
						foreach($arrOptions as $arrOption) {
							if($arrOption['value'] == $intOption1) {
								foreach($arrOption['options']['values'] as $intIndex=>$mixValue) {
									printf(
										'<option value="%s"%s>%s</option>'
										,$mixValue
										,$intOption2 == $mixValue?' selected="selected"':''
										,htmlentities($arrOption['options']['output'][$intIndex])
									);
								}
								break;
							}
						}
					?>
				</select>
			</li>
			<?php } ?>
			<li>
				<input type="submit" name="submit" value="Submit">
			</li>
			<li>
				<input type="submit" name="reset" value="Clear">
			</li>
		</ul>
	</fieldset>
</form>
</div>
</body>
</html>
6

I was afraid it may need something like AJAX, although that’s something I’ve not even looked at.

And, Oddz, I appreciate the example, I’m sure it presents that approach as cleanly as possible, but it’s still more “programatic” than I was hoping for. Still, I’ve saved a copy.

I’ll probably reload the form when the user does a Select from the first field. Then go to the database to get the correct options based on field1. The populate the second Select with the retrieved database options. My code within the form already populates that from an array of database options (probably similar to your code in that area.) I’ll just have to reload the form after a Select Onchange event, then get new data.

My gut says that what AJAX does, but I’d have to look into that.