SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Omaha, NE
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can you remove values from multiple dropdowns?

    Hi!

    I have a form that has 8 drop downs that store numbers 1-8. Each drop down represents a ranking value. As you select a value, i want that value to be removed from all the lists. Then the only values left in the lists are those that have not been selected so each value can only be selected once.

    here is my form.

    Thanks!

    Code:
    <form action="index.cfm" method="POST">
    <table>
    	<tr>
    		<td>Text1</td>
    		<td><select name="Rank1">
    				<option value="0">-Select-</option>
    				<cfloop from="1" to="8" index="rankvalue">
    					<cfoutput><option value="#rankvalue#">#rankvalue#</option></cfoutput>
    				</cfloop>
    			</select>
    		</td>
    	</tr>
    	<tr>
    		<td>Text2</td>
    		<td><select name="Rank2">
    				<option value="0">-Select-</option>
    				<cfloop from="1" to="8" index="rankvalue">
    					<cfoutput><option value="#rankvalue#">#rankvalue#</option></cfoutput>
    				</cfloop>
    			</select>
    		</td>
    	</tr>
    	<tr>
    		<td>Text3</td>
    		<td><select name="Rank3">
    				<option value="0">-Select-</option>
    				<cfloop from="1" to="8" index="rankvalue">
    					<cfoutput><option value="#rankvalue#">#rankvalue#</option></cfoutput>
    				</cfloop>
    			</select>
    		</td>				
    	</tr>
    	<tr>
    		<td>Text4</td>
    		<td><select name="Rank4">
    				<option value="0">-Select-</option>
    				<cfloop from="1" to="8" index="rankvalue">
    					<cfoutput><option value="#rankvalue#">#rankvalue#</option></cfoutput>
    				</cfloop>
    			</select>
    		</td>
    	</tr>
    	<tr>
    		<td>Text5</td>
    		<td><select name="Rank5">
    				<option value="0">-Select-</option>
    				<cfloop from="1" to="8" index="rankvalue">
    					<cfoutput><option value="#rankvalue#">#rankvalue#</option></cfoutput>
    				</cfloop>
    			</select>
    		</td>
    	</tr>
    	<tr>
    		<td>Text6</td>
    		<td><select name="Rank6">
    				<option value="0">-Select-</option>
    				<cfloop from="1" to="8" index="rankvalue">
    					<cfoutput><option value="#rankvalue#">#rankvalue#</option></cfoutput>
    				</cfloop>
    			</select>
    		</td>
    	</tr>
    	<tr>
    		<td>Text7</td>
    		<td><select name="Rank7">
    				<option value="0">-Select-</option>
    				<cfloop from="1" to="8" index="rankvalue">
    					<cfoutput><option value="#rankvalue#">#rankvalue#</option></cfoutput>
    				</cfloop>
    			</select>
    		</td>
    	</tr>
    	<tr>
    		<td>Text8</td>
    		<td><select name="Rank8">
    				<option value="0">-Select-</option>
    				<cfloop from="1" to="8" index="rankvalue">
    					<cfoutput><option value="#rankvalue#">#rankvalue#</option></cfoutput>
    				</cfloop>
    			</select>
    		</td>
    	</tr>
    </table>
    </form>
    "Oh, you hate your job? Why didn't you say so? There's a support group for that.
    It's called EVERYBODY, and they meet at the bar."

    --Drew Carey

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like this?
    NB! The script removes all other options from the <select> where a value was selected too, otherwise the user could change value in the same list multiple times, removing all options from the other lists...
    Code:
    <html>
      <head>
        <script type="text/javascript">
          function removeOpt(value, list)
          {
            var lists = document.getElementsByTagName("select");
            for(var i = 0; i < lists.length; i++)
            {
              var lst = lists[i];
              for(var j = lst.options.length - 1; j >= 0 ; j--)
              {
                if(lst != list && lst.options[j].value == value)
                {
                  lst.options[j] = null;
                }
                else if(lst == list && lst.options[j].value != value)
                {
                  lst.options[j] = null;
                }
              }
            }
          }
        </script>
      </head>
      <body>
        <form>
          <select id="lst1" onchange="removeOpt(this.value, this)">
            <option value=0>Select...</option>
            <option value=1>1</option>
            <option value=2>2</option>
            <option value=3>3</option>
          </select>
          <select id="lst2" onchange="removeOpt(this.value, this)">
            <option value=0>Select...</option>
            <option value=1>1</option>
            <option value=2>2</option>
            <option value=3>3</option>
          </select>
          <select id="lst3" onchange="removeOpt(this.value, this)">
            <option value=0>Select...</option>
            <option value=1>1</option>
            <option value=2>2</option>
            <option value=3>3</option>
          </select>
          <input type="button" value="Reset" onclick="location.reload()">
          <input type="submit" value="OK">
        </form>
      </body>
    </html>


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
  •