SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multi select without shift or ctrl

    I am need the select in my form to be a multi select, but I dont want my users to have to use shift or ctrl. I have found a solution which adds any clicked items to a second select menu (by either double clicking or htting an 'add' button. The trouble is that I am having nothing but trouble with this code so was wondering if any one had a solution which works with a form etc.

    Cheers

    monkey
    monkey - the rest is history

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did this years ago and distinctly remember it as a .

    Nonetheless, gave it the old (junior) college try. Find the bugs.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    body {
    	margin: 50px;
    	background: #007;
    }
    select, #readout {
    	width: 70px;
    	font: normal 11px "comic sans ms";
    	border: 1px #fff solid;
    }
    span#foo {
    	position: relative;
    	top: -32px;
    	font: normal 12px "comic sans ms";
    	color: #fff;
    }
    
    </style>
    <script type="text/javascript">
    
    function multiSelSpecial()
    {
    	var s = 0, select, selects = document.getElementsByTagName('select');
    	while (select = selects.item(s++))
    		if (/multiple/.test(select.getAttribute('type')))
    		{
    			select.oSelected = [];
    			select.nSelected_before = 0;
    			select.nSelected_after = 0;
    			select.onclick = function()
    			{
    				setTimeout('update()', 100); //demo, remove
    				this.oSelected.length = 0;
    				this.nSelected_before = 0;
    				for (var i = 0; i < this.options.length; ++i)
    					if (this.options[i].selected)
    						this.oSelected[this.oSelected.length] = this.options[i];
    				this.nSelected_before = this.oSelected.length;
    				if (1 == this.nSelected_before && 1 == this.nSelected_after)
    					this.onchange();
    			}
    			select.onchange = function()
    			{
    				this.nSelected_after = 0;
    				for (var i = 0; i < this.oSelected.length; ++i)
    					this.oSelected[i].selected = !this.oSelected[i].selected;
    				for (var i = 0; i < this.options.length; ++i)
    					if (this.options[i].selected)
    						++this.nSelected_after;
    
    				if (typeof bonus_function != 'undefined')
    					bonus_function(this);
    			}
    		}
    }
    
    onload = multiSelSpecial;
    
    function update()
    {
    	var oSelect = document.forms[0].elements[0];
    	for (var str = '', i = 0; i < oSelect.options.length; ++i)
    		if (oSelect.options[i].selected)
    			str += oSelect.options[i].text + ' ';
    	document.getElementById('readout').value = str;
    }
    
    </script>
    </head>
    <body>
    <form>
    <select multiple="multiple" size="5">
    <option value="value1"> option 1</option>
    <option value="value2"> option 2</option>
    <option value="value3"> option 3</option>
    <option value="value4"> option 4</option>
    <option value="value5"> option 5</option>
    </select><span id="foo">----------------<input id="readout" type="text" style="width:276px;text-align:center;color:#fff;background:#007;"></span>
    </form>
    </body>
    </html>
    
    bonus_function() allows the adding of a standard onchange handler.
    Last edited by adios; Jul 1, 2004 at 14:25.
    ::: certified wild guess :::


Bookmarks

Posting Permissions

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