Telling if option is selected

**hosdank** · 09-19-2008, 05:32 PM

I just want to tell if any option is select in a SELECT list. Thanks

**magicyte** · 09-19-2008, 09:36 PM

Here. You can use this excerpt of code:

.selectedIndex;

This is used at the end of an id of a drop-down select list.

Here. This is a VITAL example:

if(document.getElementById('your_select_menu').selectedIndex == number of option)

Where it says "number of option", you start with the number 0 for the first option, 1 for the second, and so on. Here is a regular example:

if(document.getElementById('your_select_menu').selectedIndex == 1) // if select box option selected is number 2, then
{
// your effects here
}

That should do it. Hope I helped.

-magicyte

**jscheuer1** · 09-20-2008, 10:46 AM

Originally Posted by hosdank

I just want to tell if any option is select in a SELECT list. Thanks

What magicyte has said is basically correct. If it gives you what you need to complete your code, fine. However, with a select element, one option is always selected. So it becomes more of a matter of why you want to do whatever it is that you want to do, and to a degree what the options in your select element are. Let's take a typical select element:

HTML Code:

<select name="whatever">
<option value="default" selected>Select</option>
<option value="something">First Choice</option>
<option value="another thing">Second Choice</option>
<option value="yet another thing">Third Choice</option>
</select>

Now, you could do:

Code:

<select name="whatever" onchange="alert(this.options[this.selectedIndex].value);">
<option value="default" selected>Select</option>
<option value="something">First Choice</option>
<option value="another thing">Second Choice</option>
<option value="yet another thing">Third Choice</option>
</select>

That will fire an alert that tells you the value of that select element's selected option whenever it is changed. Instead of value, you could use text, that will alert the the seen text of the selected option. Or you may just want to know if something other than the default option was selected. That can be worked out too, but to tell you just what to do, we would need to know more about exactly what you want to have happen, and under what circumstances it should occur.

**hosdank** · 09-20-2008, 02:18 PM

Well it's not a drop down list, it's just a select box, and transfer that option into another select list if the user clicks a button. So let's take your example and add a size attribute so it's non drop down

Code:

<select size=10 name="whatever">
<option value="default" selected>Select</option>
<option value="something">First Choice</option>
<option value="another thing">Second Choice</option>
<option value="yet another thing">Third Choice</option>
</select>

Let's say the user has First choice selected. Then he clicks the button which transfers it, there will be no choice selected. And the way my code works is that if he hit the button when nothing is selected. It will transfer a blank option tag. Thanks

**jscheuer1** · 09-20-2008, 03:29 PM

Originally Posted by hosdank

Let's say the user has First choice selected. Then he clicks the button which transfers it, there will be no choice selected.

That's not true, as I said, there is always a choice selected:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function xferOpt(f, o, t){
f = f.form.elements;
f[t].appendChild(f[o].options[f[o].selectedIndex].cloneNode(true));
};
</script>
</head>
<body>
<form action="#">

<select size=10 name="origin">
<option value="default" selected>Select</option>
<option value="something">First Choice</option>
<option value="another thing">Second Choice</option>
<option value="yet another thing">Third Choice</option>
</select><br>
<input type="button" value="Do It" onclick="xferOpt(this, 'origin', 'dest');"><br>
<select size=10 name="dest">

</select>
</form>
</body>
</html>

After the page loads, if I do nothing else and go straight to the 'Do It' button, it recognizes that the first option is selected and transfers that one.

**hosdank** · 09-20-2008, 03:30 PM

Yeah, that's what I want. I have the code that transfers it over:

Code:

var addOption = function(el, value, selected)
{
		var obj = document.getElementById(el), opt = document.createElement("option");
		opt.appendChild(document.createTextNode(value));
		opt.selected = selected;
		obj.appendChild(opt);
}

function removeOptions(el)
{
	var i;
	for(i=el.options.length-1;i>=0;i--)
	{
		if(el.options[i].selected)
		el.remove(i);
	}
}
</script>
<body bgcolor='lightgrey'>


<div style='position: absolute; top: 3%; left: 3%'>
<form name='proceses'>
<br><input name='processin' type='text'>&nbsp;&nbsp;&nbsp;
<input onclick='addOption("ready", document.forms["proceses"].elements["processin"].value ,false);' type='button' value='Append Process'><br><br>

<select id='ready' size=10 style='width: 150'>
<option>sadfasfd</option>

</select>
</form>
</div>


<div style='position: absolute; top: 10%; left: 20%'>
<form name='processin'>

<select id='appended' size=10 style='width: 150'>
<option>sadfasfd</option>

</select>
</form>
</div>


<div style='position: absolute; top: 13%; left: 16%'>
<form>
<input type='button' onclick='addOption("appended", document.forms["proceses"].ready.value ,false); removeOptions(ready)' value='>>'><br><br><br><br>
<input type='button' onclick='addOption("ready", document.forms["processin"].appended.value ,false); removeOptions(appended)' value='<<'>
</form>
</div>

<div style='position: absolute; top: 3%; left: 50%'>
<form>
<input type='button' onclick='addOption("appended", document.forms["proceses"].ready.value ,false); removeOptions(ready)' value='>>'><br><br><br><br>
<input type='button' onclick='addOption("ready", document.forms["processin"].appended.value ,false); removeOptions(appended)' value='<<'>
</form>
</div>

Thanks

**hosdank** · 09-20-2008, 03:36 PM

Originally Posted by jscheuer1

That's not true, as I said, there is always a choice selected:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function xferOpt(f, o, t){
f = f.form.elements;
f[t].appendChild(f[o].options[f[o].selectedIndex].cloneNode(true));
};
</script>
</head>
<body>
<form action="#">

<select size=10 name="origin">
<option value="default" selected>Select</option>
<option value="something">First Choice</option>
<option value="another thing">Second Choice</option>
<option value="yet another thing">Third Choice</option>
</select><br>
<input type="button" value="Do It" onclick="xferOpt(this, 'origin', 'dest');"><br>
<select size=10 name="dest">

</select>
</form>
</body>
</html>

After the page loads, if I do nothing else and go straight to the 'Do It' button, it recognizes that the first option is selected and transfers that one.

Yeah, but the thing is that I am removing it from the old list.

**jscheuer1** · 09-20-2008, 03:45 PM

Then just make sure that there is an option selected, and if there aren't any left, deal with that too:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function xferOpt(f, o, t){
f = f.form.elements;
if(isNaN(f[o].selectedIndex) || f[o].selectedIndex < 0){
if(f[o].options.length)
alert('Please Select an Option')
else
alert('Nothing Left to Transfer');
return;
}
f[t].appendChild(f[o].removeChild(f[o].options[f[o].selectedIndex]));
f[o].selectedIndex = 0;
};

</script>
</head>
<body>
<form action="#">

<select size=10 name="origin">
<option value="default" selected>Select</option>
<option value="something">First Choice</option>
<option value="another thing">Second Choice</option>
<option value="yet another thing">Third Choice</option>
</select><br>
<input type="button" value="Do It" onclick="xferOpt(this, 'origin', 'dest');"><br>
<select size=10 name="dest">

</select>
</form>
</body>
</html>

Added Later:

I just realized that in some browsers, refreshing the page after emptying the select list will result in no option being selected. This may be dealt with via an onload event for the page, or as I have (addition highlighted) in the above code.

**hosdank** · 09-20-2008, 04:18 PM

Thanks so much!

Thread: Telling if option is selected

Thread Tools

Search Thread

Telling if option is selected

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

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

Bookmarks

Bookmarks

Posting Permissions