One field, several buttons

I'm trying to replace a Dropdown list with a group of several buttons that simplify the choices previously shown by the dropdown list.

Specifically, the types of buttons that we're using are graphic png files.

Tried checkboxing and radio checking scripts, but or events didn't respond.

Here's an example:

<img src="http://201.148.2.247/img/btn/agua.png" name="BotonAGUA" onclick="if(this.checked)
document.getElementById('radioAgua').checked=true"/>
                                        Agua de Hermosillo<input type="radio" name="radioAgua" id="radioAgua" value="AGUAHH"> 
                                          </span></td>

Example hosted on http://201.148.2.247/

Can a开发者_高级运维nyone think of a better workaround for implementing buttons instead of a dropdown list?

That's one big button you have there. Anyway, you could use radio button/checkboxes with the <label> tag and style the label to look like a button. No javascript required.

http://www.w3schools.com/tags/tag_label.asp

The condition you have on the 'onclick' event should reffer to the input, not the image (this in your case is the image).

What about this:

<script type="text/javascript">
  function choose(id, index)
  {
    document.getElementById(id).selectedIndex = index;
  }
</script>

<button onclick="choose('choicebox', 0);">choice 1</button>
<button onclick="choose('choicebox', 1);">choice 2</button>
<button onclick="choose('choicebox', 2);">choice 3</button>

<select id="choicebox" name="choicebox" style="visibility:hidden;">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>