Maria Nolorbe Maria Nolorbe - 4 months ago 8
HTML Question

prevent select element from triggering hyperlink

I have a select box within a hyperlink. Unfortunately, It has to be this way due to some formatting constraints.

My code is as follows...

<a id="<? echo $rows['itemname']; ?>" class="radio-picture-meats" href="javascript:set_radio('<? echo $rows['itemname']; ?>');">

<span class="item_label"><? echo $rows['displayname'];?></span>

<span class="item_label_price">Per Pound<BR>$<? echo $rows['price'];?></span>

<img class="box" src="<? echo $rows['imagepath']; ?>" width="300px" height="215px"/>

<select class="weight">
<option disabled selected value> -- select an option -- </option>
<option value="1/2 Pound">1/2 Pound</option>
<option value="1 Pound">1 Pound</option>
</select>

</a>


Is there a way to prevent the select box from triggering the parent hyperlink?

Thank You

Here is a fiddle. You will notice when the dropdown select box is click, it triggers the HREF link. I would like to prevent that from happening.

FIDDLE

This is the solution that worked.

$('.weight').click(function(){ return false; });

Answer

Simply return false from link click event

$('a'+'#<? echo $rows['itemname']; ?>').click(function(){ return false; });