如何使选择输入出现在点击

Posted 2023-03-06

【中文标题】如何使选择输入出现在点击

【英文标题】：How to make a Select Input appear on click

【发布时间】：2022-01-07 06:17:53

【问题描述】：

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

ideia 是一个包含用户请求的表格。该表具有静态文本。当用户单击“Editar (Edit)”按钮时，他单击的行上的字段将转换为 Select Inputs。当用户选择他需要的输入值时，他将单击“保存”，并且字段将再次变为静态并选择值。我知道如何保存选择输入中的值，但我不知道如何在用户单击“编辑器（编辑）”时显示选择输入

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

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 表格：

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

【问题讨论】：

Options 的SELECTs 来自哪里？

来自 HTML 表格。

【参考方案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;

您当然可以为选择切换跨度/标签/任何内容，但这几乎不需要太多工作就可以解决问题。一点点 CSS 让它看起来不像一个禁用的选择，你就完成了。您也可以只遍历这些选择并禁用它们（如果您要添加更多内容则很方便）。

这是一个小提琴示例：https://jsfiddle.net/TokerX/q4st938e/

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

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");

更新小提琴：https://jsfiddle.net/TokerX/q4st938e/1/

【讨论】：

谢谢。我正在考虑类似的事情，但无法做到。祝你有美好的一天。