Retrieve DropDown List selected ID ?

Mad_T

01-14-2012, 04:13 PM

HI
I'm using this form in my site, but I want to amend it so the form updates based on the option ID, not the option Value.

This will make it easier for me to save the correct data in the value field..

Any ideas ?

<html>
<head>
<script type="text/javascript">
function setOptions(chosen) {
var selbox = document.myform.opttwo;

selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');

}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
}
}
</script>
</head>
<body>
<form name="myform"><div class="centre">
<select name="optone" size="1"
onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
<option id="0" value=" " selected="selected"> </option>
<option id="1" value="1">First Option</option>
<option id="2" value="2">Second Choice</option>
<option id="3" value="3">Third Choice</option>
</select><br /> <br />
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<input type="button" name="go" value="Value Selected"
onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">
</div></form>
</body>
</html>

So how do I get CHOSEN to equal the ID not the value ?

Thanks :)

Mad_T

01-14-2012, 04:19 PM

Really bad form to reply to my own posts... but I seem to have it working !!

<html>
<head>
<script type="text/javascript">
function setOptions(chosen) {
var selbox = document.myform.opttwo;

selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');

}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
}
}
</script>
</head>
<body>
<form name="myform" method="post"><div class="centre">
<select name="optone" size="1"
onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].id);">
<option id="0" value=" " selected="selected"> </option>
<option id="1" value="12">First Option</option>
<option id="2" value="21">Second Choice</option>
<option id="3" value="33">Third Choice</option>
</select><br /> <br />
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<input type="button" name="go" value="Value Selected" onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">
<input type="submit">
</div></form>
</body>
</html>
<?
if (isset($_POST['optone'])) {
echo $_POST['optone'] . " - " . $_POST['opttwo'];
}
?>

Any issues to be noted ?? Thanks

xelawho

01-14-2012, 04:31 PM

... only that expanding the code makes for a lot of unnecessary typing - have a look here (http://www.w3.org/TR/WCAG20-TECHS/working-examples/SCR19/dynselect.html) for an easier (imho) way to do it...

Mad_T

01-14-2012, 04:43 PM

Thanks that makes sense !