need function to display button when user make selection

[cat5ive]

Hi,

I have x number of drop down menus (contain food names) and I need to add a button next to each of the menu. Each button will appear only when user select one particular food name. If they select other food I don't want to show this button.
Can someone please help provide sample java script.
Here's my drop down menu.

<% for ix=0 to count %>
			    <tr>
      		       <td class="ver10pxgry2" width="105" align="right"><b>Items</b></td>
                      <td  colspan="3">
        		      <select name="<%=foodlist(ix)%>" class="ver10pxblk">
		 		         <option selected value="">Select One </option>
				         <% for j = 0 to numberofitems - 1 %>
         		            <option value="<%=code(j)%>"> <%=foodname(j)%></option>
				         <% next %>
        		      </select>
      		       </td>
	  	        </tr>
		        <tr> tr>
		       	<% next %>

Thanks in advance

 

[BillyRayPreachersSon]

What have you tried so far?



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[feherke]

Hi

Can someone please help provide sample java script.

This will hide the button unless the selected [tt]option[/tt]'s text contains the word "button" :

[b]<select[/b] [maroon]onchange[/maroon][teal]=[/teal][green][i]"document.getElementById('b').style.display=this.options[this.selectedIndex].text.indexOf('button')!=-1?'inline':'none'"[/i][/green][b]>[/b]
[b]<option>[/b]One[b]</option>[/b]
[b]<option>[/b]Two ( I have button )[b]</option>[/b]
[b]<option>[/b]Three[b]</option>[/b]
[b]</select>[/b]

[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"button"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"b"[/i][/green][b]>[/b]

Feherke.

http://free.rootshell.be/~feherke/

 

[cat5ive]

feherke,thank you very much for the sample.
One more question, base on your sample, the button is shown by default. Until I make selection then the button is gone. How can I control it so by default the button is not shown.

 

[feherke]

Hi

the button is shown by default.

Yes. I was just curious to see if you will solve that yourself.

How can I control it so by default the button is not shown.

Taking your words literally CSS is enough :

input[purple]#b[/purple] [teal]{[/teal]
  [blue]display:[/blue] [green]none[/green];
[teal]}[/teal]

However, if the page is reloaded from browser cache, the previous selection may be kept, so there is a chance that the button will be hidden by default when should not be.

I would use the same JavaScript code to ensure the initial synchronization too between the selection and button visibility :

[b]function[/b] [COLOR=darkgoldenrod]ch[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'b'[/i][/green][teal]).[/teal]style[teal].[/teal]display[teal]=[/teal]what[teal].[/teal]options[teal][[/teal]what[teal].[/teal]selectedIndex[teal]].[/teal]text[teal].[/teal][COLOR=darkgoldenrod]indexOf[/color][teal]([/teal][green][i]'button'[/i][/green][teal])!=-[/teal][purple]1[/purple][teal]?[/teal][green][i]'inline'[/i][/green][teal]:[/teal][green][i]'none'[/i][/green]
[teal]}[/teal]

window[teal].[/teal]onload[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  [COLOR=darkgoldenrod]ch[/color][teal]([/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'s'[/i][/green][teal]))[/teal]
[teal]}[/teal]

[b]<select[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"s"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"ch(this)"[/i][/green][b]>[/b]
[b]<option>[/b]One[b]</option>[/b]
[b]<option>[/b]Two ( I have button )[b]</option>[/b]
[b]<option>[/b]Three[b]</option>[/b]
[b]</select>[/b]

[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"button"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"b"[/i][/green][b]>[/b]

Note, that in this case the previously mentioned CSS is not needed anymore.

Feherke.

http://free.rootshell.be/~feherke/

 

[cat5ive]

I'm very appreciate your help feherke.

I've close to 0 knowledge of javascript. In my apprication, most of the time I can survive without javascript.

Thank again.