详细网格与下拉框作为列，直到点击编辑后才显示正确的值。

下面是一个使用详细网格和下拉框作为列的示例代码，直到点击编辑按钮后才显示正确值：

HTML代码：

<table id="grid">
  <thead>
    <tr>
      <th>名称</th>
      <th>值</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>项目1</td>
      <td class="editable">请选择</td>
      <td><button class="edit-button">编辑</button></td>
    </tr>
    <tr>
      <td>项目2</td>
      <td class="editable">请选择</td>
      <td><button class="edit-button">编辑</button></td>
    </tr>
    <tr>
      <td>项目3</td>
      <td class="editable">请选择</td>
      <td><button class="edit-button">编辑</button></td>
    </tr>
  </tbody>
</table>

JavaScript代码：

// 获取所有的编辑按钮和可编辑单元格
var editButtons = document.getElementsByClassName('edit-button');
var editableCells = document.getElementsByClassName('editable');

// 为每个编辑按钮添加点击事件处理程序
for (var i = 0; i < editButtons.length; i++) {
  editButtons[i].addEventListener('click', function() {
    // 获取当前行的可编辑单元格和下拉框
    var currentRow = this.parentNode.parentNode;
    var currentCell = currentRow.getElementsByClassName('editable')[0];
    
    // 创建下拉框元素
    var select = document.createElement('select');
    select.innerHTML = '<option value="值1">值1</option><option value="值2">值2</option><option value="值3">值3</option>';
    
    // 将下拉框替换为可编辑单元格
    currentRow.replaceChild(select, currentCell);
    
    // 为下拉框添加change事件处理程序
    select.addEventListener('change', function() {
      // 获取选中的值
      var selectedValue = this.value;
      
      // 创建新的可编辑单元格，显示选中的值
      var newCell = document.createElement('td');
      newCell.className = 'editable';
      newCell.textContent = selectedValue;
      
      // 将新的可编辑单元格替换回原来的下拉框
      currentRow.replaceChild(newCell, select);
    });
  });
}

此代码将使用下拉框作为可编辑单元格，并在点击编辑按钮后显示下拉框。当选择下拉框中的值时，将创建一个新的可编辑单元格，以显示选中的值。