www.webdeveloper.com
Results 1 to 3 of 3

Thread: Multi-select inject/delete

  1. #1
    Join Date
    Jan 2003
    Posts
    5

    Multi-select inject/delete

    Hi there,
    I have existing code for reorganizing a multi-select box, but I would like to improve it by adding the ability to delete list items and append list items to the top. The source of the appended items would preferably be a dropdown.

    Included below is the existing code, I've also thrown in the button and multi-select source. The multi-select source does not need to be submitted with the form, but I have included ID and name for ease of use. All this code needs is some javascript squeezed into it.

    First person to reply with a working script (tested with chrome/firefox/IE and NO JS ERRORS upon use, integrated into existing code) gets a free beer sent to their paypal, if they want it.
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <style type="text/css">
                .indent {margin-left: 2em;}
                label {border-width: 0px;border-style: solid;border-bottom-width: 1px;border-right-width: 1px; background-color: #F0F0F0;padding:1px;}
                div {margin: .5ex;}
            </style>
            <script language="JavaScript" type="text/javascript">
                function zxcSort(zxcid,zxcud){
                    var zxcsel=document.getElementById(zxcid),zxcsave;
                    var zxcmove=zxcsel.selectedIndex;
                    if (zxcmove<0) return;
                    var zxcoptary=[];
                    for (var zxc0=0;zxc0<zxcsel.options.length;zxc0++) zxcoptary.push(zxcsel.options[zxc0]);
                    if (typeof(zxcud)=='number'){
                        zxcsave=zxcmove+zxcud;
                        if (zxcsel.options[zxcsave]){
                            for (var zxc1=0;zxc1<zxcoptary.length;zxc1++){
                                zxcsel.appendChild((zxc1==zxcmove)?zxcoptary[zxcsave]:(zxc1==zxcsave)?zxcoptary[zxcmove]:zxcoptary[zxc1]);
                            }
                        }
                    }
                    else if (zxcud=='top'&&zxcmove>0){
                        zxcsel.insertBefore(zxcoptary[zxcmove],zxcoptary[0]);
                    }
                     else if (zxcud=='bottom'){
                        zxcsel.appendChild(zxcoptary[zxcmove]);
                    }
                }
                function zxcSize(zxcobj,zxcsz){
                    if (typeof(zxcobj)=='string') zxcobj=document.getElementById(zxcobj);
                    zxcobj.size=(zxcobj.size==zxcsz)?1:zxcsz;
                }
                function selectAllOptions(selStr)
                {
                var selObj = document.getElementById(selStr);
                for (var i=0; i<selObj.options.length; i++) {
                selObj.options[i].selected = true;
                }
                }
            </script>
        </head>
        <body>
            <form method="post" onsubmit="selectAllOptions('items');">
                <fieldset>
                    <legend>Reorder Items</legend>
                    <div>
                        <label for="items">Items</label>
                    </div>
                    <div class="indent">
                        <select name="sourcelist" id="sourcelist">
                            <option value="1">Option1</option>
                            <option value="2">Option2</option>
                            <option value="3">Option3</option>
                            <option value="4">Option4</option>
                            <option value="5">Option5</option>
                            <option value="6">Option6</option>
                            <option value="7">Option7</option>
                            <option value="8">Option8</option>
                            <option value="9">Option9</option>
                            <option value="10">Option10</option>
                            <option value="11">Option11</option>
                            <option value="12">Option12</option>
                            <option value="13">Option13</option>
                            <option value="14">Option14</option>
                            <option value="15">Option15</option>
                            <option value="16">Option16</option>
                            <option value="17">Option17</option>
                            <option value="18">Option18</option>
                            <option value="19">Option19</option>
                        </select>
                        <input type="button" name="" value="Add to list">
                    </div>
                    <div class="indent">
                        <input type="button" name="" value="&uarr;" onclick="zxcSort('items',-1);" >
                        <input type="button" name="" value="&uarr;&uarr;" onclick="zxcSort('items','top');" ><br>
                        <input type="button" name="" value="&darr;" onclick="zxcSort('items',1);" >
                        <input type="button" name="" value="&darr;&darr;" onclick="zxcSort('items','bottom');" ><br>
                        <input type="button" name="" value="Delete" ><br>
                        <select name="items" id="items" multiple="multiple" size="9">
                            <option value="1">Option1</option>
                            <option value="2">Option2</option>
                            <option value="3">Option3</option>
                            <option value="4">Option4</option>
                            <option value="5">Option5</option>
                            <option value="6">Option6</option>
                            <option value="7">Option7</option>
                            <option value="8">Option8</option>
                            <option value="9">Option9</option>
                        </select>
                    </div>
                    <input type="submit">
                </fieldset>
            </form>
        </body>
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    Alright, seems fairly straight forward. I will note that since you are using a 'multiple' select I also added an additional button (and function) that can remove all of the selected values. This is in addition to the insert and delete functions you already requested.

    There is one catch though (this is also a pun), IE7. You do request support for Chrome, Firefox and IE, though you don't quite specify which versions. IE8-IE11 work exactly as you requested. IE7 however is a bit primitive. The method to add options to a select did not yet support custom placement/indexes, thus you could only actually insert at the end. So realistically the only way to add a new option to the beginning (without messing up or altering any other options) would be to basically copy all the options and re-add them all, but only after adding your new option first (index 0). I did not include this in my code as I felt it was a bit of an annoyance to code and since I don't know what kind of IE support you wanted. In any case, IE7 still works, it just appends the option to the end, not the beginning.

    HTML Code:
    <!doctype html>
    <html>
    <head>
    	<title>Multi-select inject/delete</title>
    	<style type="text/css">
    		.indent {margin-left: 2em;}
    		label {border-width: 0px;border-style: solid;border-bottom-width: 1px;border-right-width: 1px; background-color: #F0F0F0;padding:1px;}
    		div {margin: .5ex;}
    	</style>
    	<script language="JavaScript" type="text/javascript">
    			function zxcSort(zxcid, zxcud) {
    					var zxcsel = document.getElementById(zxcid), zxcsave;
    					var zxcmove = zxcsel.selectedIndex;
    					if(zxcmove < 0) return;
    					var zxcoptary = [];
    					for(var zxc0 = 0; zxc0 < zxcsel.options.length; zxc0++) zxcoptary.push(zxcsel.options[zxc0]);
    					if(typeof(zxcud) == 'number') {
    							zxcsave = zxcmove + zxcud;
    							if (zxcsel.options[zxcsave]) {
    									for (var zxc1 = 0; zxc1 < zxcoptary.length; zxc1++) {
    											zxcsel.appendChild((zxc1==zxcmove)?zxcoptary[zxcsave]:(zxc1==zxcsave)?zxcoptary[zxcmove]:zxcoptary[zxc1]);
    									}
    							}
    					} else if(zxcud=='top'&&zxcmove>0) {
    							zxcsel.insertBefore(zxcoptary[zxcmove],zxcoptary[0]);
    					} else if(zxcud=='bottom') {
    						zxcsel.appendChild(zxcoptary[zxcmove]);
    					}
    			}
    			function zxcSize(zxcobj,zxcsz){
    				if(typeof(zxcobj) == 'string') zxcobj = document.getElementById(zxcobj);
    				zxcobj.size = (zxcobj.size == zxcsz)?1:zxcsz;
    			}
    			function selectAllOptions(selStr) {
    				var selObj = document.getElementById(selStr);
    				for(var i = 0; i < selObj.options.length; i++) {
    					selObj.options[i].selected = true;
    				}
    			}
    			
    			function _AddToList($a, $b) {
    				var $s = document.getElementById($a);
    				var $o = document.createElement("option");
    				try {
    					$o.text = $s.options[$s.selectedIndex].text;
    					$o.value = $s.value;
    					document.getElementById($b).options.add($o, document.getElementById($b)[0]);
    				} catch(e) {
    					document.getElementById($b).options[document.getElementById($b).options.length] = new Option($s.options[$s.selectedIndex].text, $s.value);
    				}
    			}
    			
    			function _DeleteFromList($a) {
    				var $s = document.getElementById($a);
    				$s.remove($s.selectedIndex);
    			}
    			function _DeleteMultipleFromList($a) {
    				var $s = document.getElementById($a);
    				for(var $i = $s.options.length-1; $i >= 0; $i--) {
    					if($s.options[$i].selected == true) $s.remove($i);
    				}
    			}
    	</script>
    </head>
    <body>
    	<form method="post" onsubmit="selectAllOptions('items');">
    			<fieldset>
    					<legend>Reorder Items</legend>
    					<div>
    							<label for="items">Items</label>
    					</div>
    					<div class="indent">
    							<select name="sourcelist" id="sourcelist">
    									<option value="1">Option1</option>
    									<option value="2">Option2</option>
    									<option value="3">Option3</option>
    									<option value="4">Option4</option>
    									<option value="5">Option5</option>
    									<option value="6">Option6</option>
    									<option value="7">Option7</option>
    									<option value="8">Option8</option>
    									<option value="9">Option9</option>
    									<option value="10">Option10</option>
    									<option value="11">Option11</option>
    									<option value="12">Option12</option>
    									<option value="13">Option13</option>
    									<option value="14">Option14</option>
    									<option value="15">Option15</option>
    									<option value="16">Option16</option>
    									<option value="17">Option17</option>
    									<option value="18">Option18</option>
    									<option value="19">Option19</option>
    							</select>
    							<input type="button" name="" value="Add to list" onclick="_AddToList('sourcelist', 'items')">
    					</div>
    					<div class="indent">
    							<input type="button" name="" value="&uarr;" onclick="zxcSort('items', -1);">
    							<input type="button" name="" value="&uarr;&uarr;" onclick="zxcSort('items', 'top');"><br>
    							<input type="button" name="" value="&darr;" onclick="zxcSort('items', 1);">
    							<input type="button" name="" value="&darr;&darr;" onclick="zxcSort('items', 'bottom');"><br>
    							<input type="button" name="" value="Delete" onclick="_DeleteFromList('items')">
    							&nbsp;&nbsp;&nbsp;&nbsp;
    							<input type="button" name="" value="Delete Multiple" onclick="_DeleteMultipleFromList('items')">
    							<br>
    							<select name="items" id="items" multiple="multiple" size="9">
    									<option value="1">Option1</option>
    									<option value="2">Option2</option>
    									<option value="3">Option3</option>
    									<option value="4">Option4</option>
    									<option value="5">Option5</option>
    									<option value="6">Option6</option>
    									<option value="7">Option7</option>
    									<option value="8">Option8</option>
    									<option value="9">Option9</option>
    							</select>
    					</div>
    					<input type="submit">
    			</fieldset>
    	</form>
    </body>
    </html>
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Jan 2003
    Posts
    5
    That works out fantastic, thank you! As far as the IE7 thing, as long as it functions on the same basic level I don't see an issue, esp. when there is a "move to top" button. The request to prepend the item to the list was more of a note of preference than anything.

    PM me your paypal if you want to take me up on that free beer

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles