I've configured my table rows to trigger a bootstrap modal upon click.
However, I have an issue with the select box in each row allowing user selection of status options.
Is there a way to prevent the modal from opening when the select box is clicked?
Below is the relevant code snippet:
HTML
<div class="row">
<div class="col-md-6">
<table class="table">
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<tr class="user-row" data-toggle="modal" data-target="#myModal">
<td>John Doe</td>
<td>
<select class="form-control status-selection">
<option></option>
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>
<tr class="user-row" data-toggle="modal" data-target="#myModal">
<td>Jane Doe</td>
<td>
<select class="form-control status-selection">
<option></option>
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>
</table>
</div>
</div>
<!-- Modal content -->
...
Jsfiddle demo available here: https://jsfiddle.net/2c21mzfm/
Any suggestions on resolving this challenge would be greatly appreciated. Thank you.