HTML select with option to enter custom value inside a table

Question

I am trying to add select box where user can select the option from a predefined set or enter a custom value. The select element is inside a table. unfortunately datalist is not going to work for me. I modified the solution found in HTML select form with option to enter custom value to fit my needs and it almost works except when I select 'Enter Option' (to type the custom value) the cell height doubles. How can I keep the table cell height same? I am hoping some simple css trick. Here is my http://jsfiddle.net/oyb2Lgvr/ Thanks in advance for all your help. code below:


<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;
}

Fractalism · Answer 1 · 2023-01-21T20:55:05.327

2

You could make .editOption absolutely positioned, like this:

.editOption {
  width: 80px;
  position: absolute;
  left: 0;
  border: 0;
  padding-left: 5px;
}

UPDATE: To make this work with multiple columns in the table, assign a non-static position to td so that .editOption lies within the table cell.

#tid td {
  position: relative;
  border-collapse: collapse;
  border: 1px solid black;
  width: 80px;
  max-height: 5px;
}

edited Jan 21 '23 at 20:55

answered Jan 21 '23 at 19:38

Fractalism

1,231
3
12

That will not work for me. For example, if this select element is in second column, it positions the input text element in a different location. I edited my original question to show 2 columns just to make it clear. – Suresh Jan 21 '23 at 20:11
@Suresh That makes sense. I have edited my answer to handle multiple columns. – Fractalism Jan 21 '23 at 20:57

HTML select with option to enter custom value inside a table

1 Answers1