JSFiddle - React, Tailwind, and code Playground

by cgtrman

HTML

<table>

<tr id='propid_9'>
<td id='states_td_9'>
<div id='hold_dropdown_menu' style='display:none;'>
  <select id="states_frm_dropdown_9" onchange="SelectChanged(this)">
    <option value="">Select an option</option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3" selected='selected'>Option 3</option>
    <option value="Option 4">Option 4</option>
    <option value="Option 5">Option 5</option>
  </select>
</div>
<div id='hold_option_name'>Option 3</div>
</td>
</tr>
</table>

JavaScript

// Click Handler - 
$("#states_td_9").on("click", function(e) {
   alert('TD Clicked'); 
   // Hide text
   $('#hold_option_name').hide();
   // Show dropdown menu
   $('#hold_dropdown_menu').show();
   
   e.stopPropagation(); // Halt event bubbling
});

//states_td_9

// Click Handler - 
$("#states_frm_dropdown_9").on("change", function() {
   alert(this.value); 
   e.stopPropagation(); // Halt event bubbling
});