如何在点击时显示 Select 输入

Question

我不知道我在标题中表达的是否正确，但我有以下疑问。

ideia 是 table 用户请求。 table 有静态文本。当用户单击按钮 'Editar (Edit)' 时，他单击的行上的字段将转换为 Select 输入。当用户 select 他需要的输入值时，他将单击“保存”，字段将再次变为静态值 selected。我知道如何保存 Select 输入的值，但我不知道如何在用户单击 'Editar (Edit)'

时显示 Select 输入

这是将用户在 Select 输入中选择的值转换为字符串的代码：

let teste2 = document.getElementsByClassName('selectTotal')[0]
let teste3 = document.getElementsByTagName('td')[2]
let teste1 = document.getElementsByClassName('selectTotal')[0].value
let teste1tam = document.getElementsByClassName('selectTotal').length
let m = document.getElementsByClassName('editar')
let mar = document.getElementsByClassName('editar').length
for(i = 0; i<mar; i++){
  m[i].addEventListener("click", function(event){
    if(document.getElementsByClassName('selectTotal')[0].value == 'Liberação de Acesso'){
      teste2.value = 'Liberação de Acesso'
      teste3.innerHTML = 'Liberação de Acesso'
    } else if (document.getElementsByClassName('selectTotal')[0].value == 'Sistema Lento'){
      teste2.value = 'Sistema Lento'
      teste3.innerHTML = 'Sistema Lento'
    } else if (document.getElementsByClassName('selectTotal')[0].value == 'Problema'){
      teste2.value = 'Problema'
      teste3.innerHTML = 'Problema'
    }
  })
}

这是HTML table:

        <tr>
          <td scope="row" class='zeroCol'>1</td>
          <td class='primeiraCol'>teste</td>
          <td class='segundaCol'>
            <label for="setorSelect"></label>
            <select name="urgencias" id="setorSelect" class='selectTotal'>
              <option value="Liberação de Acesso">Liberação de Acesso</option>
              <option value="Sistema Lento">Sistema Lento</option>
              <option value="Problema">Problema</option>
            </select>
          </td>
          <td class='terceiraCol'>teste</td>
          <td class='quartaCol'>
            <label for="tipoSelect"></label>
            <select name="urgencias" id="tipoSelect" class='selectTotal'>
              <option value="Liberação de Acesso">Liberação de Acesso</option>
              <option value="Sistema Lento">Sistema Lento</option>
              <option value="Problema">Problema</option>
            </select>
          </td>
          <td class='quintaCol'>Aberto</td>
          <td class='sextaCol'></td>
          <td class='setimaCol'>uuuuu</td>
          <td class='oitavaCol'><textarea name="name" rows="2" cols="40"
              readonly>Salvar Chat dia José Pode fazer o favor de verificar para liberar o acesso da pasta PCP no computador do lider André . precisa de alguma liberação do Diego ? Att Sabrina</textarea>
          </td>
          <td class='nonaCol'>
            <button type="button" class="btn btn-success acoes-botao">Salvar</button>
            <button type="button" class="btn btn-success acoes-botao">Chat</button>
            <button type="button" class="btn btn-success acoes-botao editar">Editar</button>
            <button type="button" class="btn btn-danger acoes-botao">Aprovação</button>
          </td>
        </tr>

Answer 1

是这样的吗？

function save() {
  document.getElementById("setorSelect").disabled = true;
  document.getElementById("tipoSelect").disabled = true;
}

function edit() {
  document.getElementById("setorSelect").disabled = false;
  document.getElementById("tipoSelect").disabled = false;
}

您当然可以将 spans/labels/whatever 切换为 select 秒，但这几乎可以解决问题，无需太多工作。一点点 CSS 让它看起来不像残疾人 select，你就完成了。你也可以迭代那些 selects 并禁用它们（如果你要添加更多的话很方便）。

这是一个例子 fiddle：https://jsfiddle.net/TokerX/q4st938e/

如果您真的想为 select 切换标签，反之亦然：

function save() {
  document.getElementById("setorSelectLabel").innerHTML = document.getElementById("setorSelect").value;
  document.getElementById("tipoSelectLabel").innerHTML = document.getElementById("tipoSelect").value;
  document.getElementById("setorSelect").classList.add("hidden");
  document.getElementById("setorSelectLabel").classList.remove("hidden");
  document.getElementById("tipoSelect").classList.add("hidden");
  document.getElementById("tipoSelectLabel").classList.remove("hidden");
}

function edit() {
  document.getElementById("setorSelect").classList.remove("hidden");
  document.getElementById("setorSelectLabel").classList.add("hidden");
  document.getElementById("tipoSelect").classList.remove("hidden");
  document.getElementById("tipoSelectLabel").classList.add("hidden");
}

已更新 fiddle：https://jsfiddle.net/TokerX/q4st938e/1/

如何在点击时显示 Select 输入

How to make a Select Input appear on click

html

javascript

css

html-table