Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2002
    Location
    Noblesville, IN
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Highlight all in a select box.

    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.

    Code:
    <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>
    Ed Ventura
    Graphic/Web Designer
    www.blackwatercompany.com

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Better to use a checkbox, no?
    Code:
    <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>
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    He's paying for it...
    Code:
    <!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>
    Last edited by cheesebagpipe; 04-01-2003 at 12:37 AM.

  • #4
    New Coder
    Join Date
    Jul 2002
    Location
    Noblesville, IN
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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>
    Ed Ventura
    Graphic/Web Designer
    www.blackwatercompany.com

  • #5
    New Coder
    Join Date
    Jul 2002
    Location
    Noblesville, IN
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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>
    Ed Ventura
    Graphic/Web Designer
    www.blackwatercompany.com

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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".
    Last edited by whammy; 04-03-2003 at 12:29 AM.
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #7
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perhaps a button is better!:
    Code:
    <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>
    Last edited by whammy; 04-03-2003 at 12:52 AM.
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •