...

View Full Version : Highlight all in a select box.



ventura
04-01-2003, 12:07 AM
i have a select box with 4-5 options in it. how do i set it up so that when you click on a text link that says select all, all the options are highlighted, and when you click on it again it unhighlights everything.




<a href="#">Highlight All/None</a><br>
<select name=doctype size=4 multiple>
<option value="3" >Article</option>
<option value="7" >Miscellaneous</option>
<option value="37" >Newsletter</option>
<option value="12" >Publication</option>
</select>

beetle
04-01-2003, 12:14 AM
Better to use a checkbox, no?
<html>
<head>

<script>

function selectAllOptions( cb, selName )
{
var f = cb.form;
var sel = f.elements[selName];

var opt, i = 0;
while( opt = sel.options[i++] )
{
opt.selected = cb.checked;
}
}

</script>

</head>

<body>

<form>
Select All <input type="checkbox" onclick="selectAllOptions( this, 'doctype' )" />
<br>
<select name="doctype" size="4" multiple="true">
<option value="3" >Article</option>
<option value="7" >Miscellaneous</option>
<option value="37" >Newsletter</option>
<option value="12" >Publication</option>
</select>
</form>

</body>

cheesebagpipe
04-01-2003, 12:24 AM
He's paying for it...:D


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<style type="text/css">

a:link,a:visited {
font: bold 12px arial;
color: tomato;
}

</style>
<script type="text/javascript" language="javascript">

function select_all(oLink,selName) {
var opt, i = 0, bWhich = (oLink.innerHTML == 'Select All');
while (opt = document.forms[0][selName][i++]) opt.selected = bWhich;
oLink.innerHTML = bWhich ? 'Select None' : 'Select All';
return false;
}

</script>
</head>
<body>
<form>
<select name="doctype1" size="4" multiple="multiple">
<option value="3" >Article</option>
<option value="7" >Miscellaneous</option>
<option value="37" >Newsletter</option>
<option value="12" >Publication</option>
</select>
<a href="#" onclick="return select_all(this,'doctype1')">Select All</a>
<br /><br />
<select name="doctype2" size="6" multiple="multiple">
<option value="1" >Application Note</option>
<option value="2" >Application Tutorial</option>
<option value="10" >Product Bulletin</option>
<option value="29" >Product Insert</option>
<option value="38" >Quick Ref Card</option>
<option value="14" >Quick Start Guide</option>
</select>
<a href="#" onclick="return select_all(this,'doctype2')">Select All</a>
<form>
</body>
</html>

ventura
04-01-2003, 12:27 AM
yeah, a checkbox works also, but how do i do this if i have several select fields with different values but all in the same form? i actually have 5 different select menus that need to have this functionality.




<form>
<a href="#">Highlight All/None</a><br>
<select name=doctype size=4 multiple>
<option value="3" >Article</option>
<option value="7" >Miscellaneous</option>
<option value="37" >Newsletter</option>
<option value="12" >Publication</option>
</select>
<br>
<br>
<a href="#">Highlight All/None</a><br>
<select name=doctype size=5 multiple>
<option value="1" >Application Note</option>
<option value="2" >Application Tutorial</option>
<option value="10" >Product Bulletin</option>
<option value="29" >Product Insert</option>
<option value="38" >Quick Ref Card</option>
<option value="14" >Quick Start Guide</option>
</select>

</form>

ventura
04-01-2003, 06:43 PM
can someone take a look at this code that i used from everyone's help and tell me why when i click on one of the select all/none links, only the first option gets highlighted?

thanks.



<html>
<head>
<script language="JavaScript1.2">
function initUnexpand() {
tempHide = document.all.tags("DIV");
for (i=0; i < tempHide.length; i++) {
if (tempHide(i).className == "child") {
tempHide(i).style.display = "none";
}
}
}

function expandIt(idName) {
thisId = eval(idName + "Child");
if (thisId.style.display == "none") {
thisId.style.display = "block";
}
else {
thisId.style.display = "none";
}
}

with (document) {
document.write("<style type='text/css'>");
document.write(" .child { display: none}");
document.write("<" + "/style>");
}
window.onload = initUnexpand;


function select_all(oLink,selName) {
var opt
var i = 0
bWhich = (oLink.innerHTML == 'Select All');
while (opt = document.forms[0][selName][i++]) opt.selected = bWhich;
oLink.innerHTML = bWhich ? 'Deselect All' : 'Select All';
return false;
}
</script>
</head>
<body>
<form>
<!-- NEW DOCUMENT TYPE -->
<div id="creditParent" name="creditParent" class="parent">
<p>
<!-- Just change the parameter in the expandIt function to the id of the div (without the word "Parent") -->
<a class="menu" href="javascript:;" onClick="expandIt('credit'); return false">Open this more..</a></p>
</div>
<!-- The id and name tags for the child needs to match the parent tag except ends in "Child" -->
<div id="creditChild" name="creditChild" class="child">
<blockquote>
<blockquote>
<p><font face="arial,helvetica" size=2><b>Document Type:</b></font><br>
<a href="#" onclick="return select_all(this,'doctype1')">Select All</a> of Articles and Publications <br>
<select name="doctype1" size="4" multiple>
<option value="3" >Article</option>
<option value="7" >Miscellaneous</option>
<option value="37" >Newsletter</option>
<option value="12" >Publication</option>
</select>
<br>
<br>
<a href="#" onclick="return select_all(this,'doctype2')">Select All</a> of Chemistry/Reagent Documents<br>
<select name="doctype2" size="5" multiple>
<option value="1" >Application Note</option>
<option value="2" >Application Tutorial</option>
<option value="10" >Product Bulletin</option>
<option value="29" >Product Insert</option>
<option value="38" >Quick Ref Card</option>
<option value="14" >Quick Start Guide</option>
</select>
<br>
<br>
<a href="#" onclick="return select_all(this,'doctype3')">Select All</a> of Instrument/SW Documents<br>
<select name="doctype3" size="5" multiple>
<option value="9" >Operating Instruction</option>
<option value="11" >Protocol</option>
<option value="13" >Quick Ref Guide</option>
<option value="16" >Release Note</option>
<option value="17" >Safety Guideline</option>
<option value="21" >Software User Man</option>
<option value="28" >Technical Note</option>
<option value="24" >User Bulletin</option>
<option value="25" >User Manual</option>
</select>
<br>
<br>
<a href="#" onclick="return select_all(this,'doctype4')">Select All</a> of Service/Installation Documents<br>
<select name="doctype4" size="2" multiple>
<option value="5" >Install/Admin Man</option>
<option value="19" >Site Prep Manual</option>
</select>
<br>
<br>
<a href="#" onclick="return select_all(this,'doctype5')">Select All</a> of Specifications &amp; Reference<br>
<select name="doctype5" size="5" multiple>
<option value="30" >Brochure</option>
<option value="27" >Data Sheet</option>
<option value="4" >FAQ</option>
<option value="15" >Reference Manual</option>
<option value="22" >SpecSheet</option>
</select>
<br>
<br>
</p>
</blockquote>
</blockquote>
</div>
<!-- END NEW DOCUMENT TYPE -->
</form>
</body>
</html>

whammy
04-02-2003, 12:27 AM
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
var mselect = true;
function mselected(fld) {
if(fld.options.selectedIndex > -1) mselect = false;
for(i = 0; i < fld.options.length; i ++) {
fld.options[i].selected = mselect ? true : false;
}
mselect = !mselect;
}
// -->
</script>
</head>
<body>
<form id="form1" action="javascript://">
<a href="javascript:mselected(document.forms[0].doctype)">Select/Deselect All</a><br />
<select multiple name="doctype">
<option value="3">Article</option>
<option value="7">Miscellaneous</option>
<option value="37">Newsletter</option>
<option value="12">Publication</option>
</select>
</form>
</body>
</html>


P.S. Modified to see if anything was selected... probably there's a more elegant way to do this, but it works...

Actually, if someone can improve this even further (or not), I know an application or two of mine I can (and will) use this function in! It never hurts to add a "user-friendly" touch to people who are not familiar with things such as "multiple selects". ;)

cheesebagpipe
04-02-2003, 01:33 AM
Not sure what the problem is; seems to work OK. Anyhow...upon further reflection, not sure a link is the best approach here; I've always used a button:

<html>
<head>
<style tyype="text/css">

select {
width: 134px;
}

input.button {
width: 104px;
}

b {
width: 240px;
font-size: 18px;
font-weight: 200;
margin-left: 3px;
padding: 0px 0px 1px 2px;
border-bottom: 2px black solid;
background: buttonface;
}

</style>
<script language="JavaScript1.2">

function select_all(oButton,selName) {
var opt, i = 0, bWhich = (oButton.value == '<< Select All');
while (opt = document.forms[0][selName][i++]) opt.selected = bWhich;
oButton.value = bWhich ? '<< Deselect All' : '<< Select All';
return false;
}

function checkit(oSelect,oButton) {
var opt, i = 1, bAll = oSelect.options[0].selected;
while (opt = oSelect.options[i++]) if (opt.selected != bAll) return;
select_all(oButton,oSelect.name);
}

</script>
</head>
<body>
<form>
<table>
<tr>
<th colspan="2" align="left">Document Type:</th>
</tr><tr>
<td>
<select name="doctype1" size="4" multiple="multiple" onchange="checkit(this,button1)">
<option value="3" >Article</option>
<option value="7" >Miscellaneous</option>
<option value="37" >Newsletter</option>
<option value="12" >Publication</option>
</select>
</td><td>
<input type="button" name="button1" value="<< Select All" class="button"
onclick="select_all(this,'doctype1')"><b> Articles and Publications</b>
</td></tr>
<tr><td>
<select name="doctype2" size="6" multiple="multiple" onchange="checkit(this,button2)">
<option value="1">Application Note</option>
<option value="2">Application Tutorial</option>
<option value="10">Product Bulletin</option>
<option value="29">Product Insert</option>
<option value="38">Quick Ref Card</option>
<option value="14">Quick Start Guide</option>
</select>
</td><td>
<input type="button" name="button2" value="<< Select All" class="button"
onclick="return select_all(this,'doctype2')"><b> Chemistry/Reagent Documents</b>
</td></tr>
<tr><td>
<select name="doctype3" size="9" multiple="multiple" onchange="checkit(this,button3)">
<option value="9">Operating Instruction</option>
<option value="11">Protocol</option>
<option value="13">Quick Ref Guide</option>
<option value="16">Release Note</option>
<option value="17">Safety Guideline</option>
<option value="21">Software User Man</option>
<option value="28">Technical Note</option>
<option value="24">User Bulletin</option>
<option value="25">User Manual</option>
</select>
</td><td>
<input type="button" name="button3" value="<< Select All" class="button"
onclick="return select_all(this,'doctype3')"><b> Instrument/SW Documents</b>
</td></tr>
<tr><td>
<select name="doctype4" size="2" multiple="multiple" onchange="checkit(this,button4)">
<option value="5">Install/Admin Man</option>
<option value="19">Site Prep Manual</option>
</select>
</td><td>
<input type="button" name="button4" value="<< Select All" class="button"
onclick="return select_all(this,'doctype4')"><b> Specifications & Reference</b>
</td></tr>
<tr><td>
<select name="doctype5" size="5" multiple="multiple" onchange="checkit(this,button5)">
<option value="30">Brochure</option>
<option value="27">Data Sheet</option>
<option value="4">FAQ</option>
<option value="15">Reference Manual</option>
<option value="22">SpecSheet</option>
</select>
</td><td>
<input type="button" name="button5" value="<< Select All" class="button"
onclick="return select_all(this,'doctype5')"><b> Service/Installation Documents</b>
</td></tr>
</table>
</form>
</body>
</html>

whammy
04-03-2003, 12:38 AM
Perhaps a button is better!:


<html>
<head>
<title></title>

<script type="text/javascript">
<!--
var mselect = true;
function mselected(fld) {
if(fld.options.selectedIndex > -1) mselect = false;
for(i = 0; i < fld.options.length; i ++) {
fld.options[i].selected = mselect ? true : false;
}
mselect = !mselect;
}
// -->
</script>

</head>
<body>
<div style="text-align:center">
<form id="form1" action="javascript://">
<select multiple name="doctype">
<option value="3">Article</option>
<option value="7">Miscellaneous</option>
<option value="37">Newsletter</option>
<option value="12">Publication</option>
</select><br />
<input type="button" value="Toggle All" onclick="mselected(this.form.doctype)" />
</form>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum