#1
  1. The Basketball Star
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2001
    Location
    H-Town
    Posts
    550
    Rep Power
    14

    JavaScript and Select Fields


    First of all, let me just let you know that this has to work in both Internet Explorer and Netscape. I usually don't like asking for complete codes, but when it comes to JavaScript and it's quirks I usually appreciate it. If it's too much trouble, please just lead me in the right direction.

    Okay, here's what I'm trying to do. I have two select fields. One is filed with authors' name and another one starts of empty. An example of one of the options in the authors select fields is:
    Code:
    <option value="15">Ben Ilegbodu</option>
    15 stands for the authorcode. Anyway, in between the two fields are two buttons: "Add" and "Remove." I'm sure by now you can guess what I'm getting at. I want to be able to choose an author in the left select field, press the "Add" button and have it appear in the right select field. And if I were to do it again for another author, the second author's name would be under the first author's name. I also need to be able to remove, the author's name from the right select field via the "Remove" button. And just when you think I'm already asking for too much, I need two more things. I need the option tags in the right select field to be the same as it was in the left one (shouldn't be that hard I don't think). And the second one is a little harder. I want to be able to prevent duplicate authors being added. Like an alert() message would pop up saying that they can't add duplicates and the operation will be stopped.

    Well, I've asked for a lot, but I think the things I can't do are add the stuff from the left field to the right one (I know how to get the value of the left one, but that's it). Also, I don't think I know to remove from the right field.

    Thanks for all the help!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    la, ca
    Posts
    84
    Rep Power
    14
    Give this a try. I wrote it pretty quickly, but I think it addresses everything you need. I also tested it in IE5, Opera, Mozilla 6 and Netscape 4 and it seems to be good on those.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <title>Add and Remove from 2 Select Boxes</title>
    <script language="javascript" type="text/javascript">
    /* Desc: adds and removes authors or whatever from one SELECT list to another.
     * Use freely: of course!
     * author: jeremy osterloh (dsknkt)
     * email: jmosterlohATSYMBOLyahooDOTcom
     * Do I need a job?: Yes, around Los Angeles.
     */
    
    function init(){
    // initializes global variables (aliases) for the other functions to use. makes life easier
    	window.dUnselected = document.theForm.authors;
    	window.dSelected = document.theForm.selauthors;
    }
    
    function addSelected(){
    /* function to add the selected item from the Unselected Box to the Selected Box
     * var addThisSelection - flag for determining whether we should add the selection to the Selected Box
     * var theIndex - the index position of the selected option
     * var theName - the text element of the selected option
     * var theId - the value element of the selected option
     */
    	var addThisSelection = 1;
    	var theIndex = dUnselected.selectedIndex;
    	var theName = dUnselected.options[theIndex].text;
    	var theId = dUnselected.options[theIndex].value;
    
    /* 
     * if they haven't selected anything to be added, addThisSelection should = 0
     * else if they have selected something to be added, check if that one has been added already
     */
    	if (theIndex == 0){
    		addThisSelection = 0;
    	} else {
    		for (i = 0; i < dSelected.options.length; i++){
    			if (dSelected.options[i].text == theName){
    				alert("You've already added " + theName);
    				addThisSelection = 0;
    			}
    		}
    	}
    
    /* if addThisSelection != 0, create an Option object called AddMe and add that Object to the selected Box
     * if this is the first addition, we want it in the first index
     * otherwise, we'll just tack him to the end of the selected options.
     */
    	if (addThisSelection != 0){
    		AddMe = new Option(theName, theId);
    		if (dSelected.options[0].value == 0){
    			dSelected.options[dSelected.options.length-1] = AddMe;
    		} else {
    			dSelected.options[dSelected.options.length] = AddMe;
    		}
    	}
    }
    
    function removeSelected(){
    /*
     * if they have not selected anything to be removed, don't do anything
     * otherwise, remove the selected option.
     * if there are no more options in the Selected Box,
     * then we have to add an Option object ("Blank") at index 0
     * to maintain the size of the box, add &amp;nbsp's instead of an empty string
     */
    	if(dSelected.options.selectedIndex == -1){
    		// do nothing
    	} else if (dSelected.options[0].value != 0){
    		dSelected.options[dSelected.options.selectedIndex] = null;
    		if(dSelected.options.length == 0){
    			Blank = new Option("", 0);
    			dSelected.options[dSelected.options.length] = Blank;
    		}
    	}
    
    }
    
    function getSelected(){
    /* 
     just here to show you that theId remains intact
     */
    	for (i = 0; i < dSelected.options.length; i++){
    		alert(dSelected.options[i].text + " id=" + dSelected.options[i].value);
    	}
    }
    </script>
    </head>
    
    <body onLoad="init();">
    <form name="theForm">
    <!-- the Unselected Box -->
    <select name="authors" size="5">
    		<option value="0" SELECTED></option>
    		<option value="1">Ben Forta</option>
    		<option value="2">Leon Atkinson</option>
    		<option value="3">David Flanagan</option>
    		<option value="4">Matt Welsh</option>
    </select>
    
    <!-- your options: compress 'java' and 'script' -->
    <a href="javascript:addSelected();">add</a> | 
    <a href="javascript:removeSelected();">remove</a> | 
    <a href="javascript:getSelected();">get</a>
    
    <!-- the Selected Box. We need all those &amp;nbsp's because some browsers don't like dynamically resizing the select box-->
    <select name="selauthors" size="5">
    	<option value="0" selected>
    		&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
    		&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
    		&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
    		&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
    		&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
    	</option>
    </select>
    
    </body>
    </html>
    Be sure to compress "java" and "script" in the anchor tag and anywhere else they get split apart.

    If you don't want to have the blank option (value=0) on the Unselected list, you should also remove :
    Code:
    if (theIndex == 0){
    addThisSelection = 0;
    } else {
    and the subsequent closing brace from the addSelected() function.

    Hope this is what you need. Or at least, hope it points you in the right direction.
    Last edited by dsknkt; February 27th, 2002 at 01:37 AM.
  4. #3
  5. The Basketball Star
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2001
    Location
    H-Town
    Posts
    550
    Rep Power
    14
    Wow, thanks a lot for taking all the time out to help me. I really, really appreciate it. And yes it did work fine (made some modifications) and it's working perfectly. Thanks again!

IMN logo majestic logo threadwatch logo seochat tools logo