My goal is to incorporate a select box where users can either choose from a set list of options or input their own custom value. The select element is nested within a table. Unfortunately, using datalist is not a viable solution for me in this case. I have adapted a method I found on HTML select form with option to enter custom value to suit my needs, and it almost works perfectly except for the fact that when 'Enter Option' (to type a custom value) is selected, the height of the cell doubles. Is there a simple CSS trick to maintain uniform table cell height? Here is the link to my code on jsFiddle. Thank you in advance for your assistance. Below is the code:
<table id="tid">
<tbody>
<tr>
<td>column1</td>
<td>
<select>
<option class="non" value="option1">Option1</option>
<option class="non" value="option2">Option2</option>
<option class="non" value="option3">Option3</option>
<option class="editable" value="">Enter Option</option>
</select>
<input class="editOption" style="display:none;" placeholder="Enter Value"></input>
</td>
</tr>
<tr>
<td>column1</td>
<td>
<select>
<option class="non" value="option1">Option1</option>
<option class="non" value="option2">Option2</option>
<option class="non" value="option3">Option3</option>
<option class="editable" value="">Enter Option</option>
</select>
<input class="editOption" style="display:none;" placeholder="Enter Value"></input>
</td>
</tr>
</tbody>
</table>
Javascript
$('#tid > tbody > tr > td:nth-child(2)').change(function() {
var selected = $('option:selected', this).attr('class');
if (selected == "editable") {
$(this).find('.editOption').show();
$(this).find('.editOption').keyup(function() {
var editText = $(this).find('.editOption').val();
$(this).find('.editable').val(editText);
$(this).find('.editable').text('Enter Option');
});
} else {
$(this).find('.editOption').hide();
}
});
CSS
#tid td {
border-collapse: collapse;
border: 1px solid black;
width: 80px;
max-height: 5px;
}
.editOption {
width: 80%;
position: relative;
top: -20px;
border: 0;
padding-left: 5px;
}