-1

Está sendo enviado do servidor para esta view um objeto com algumas informações e dentre elas estão os valores que quero atribuir para cada um dos inputs select, mas não consigo atribuir. Estou usando o ejs como minha view engine.

<!DOCTYPE html>
<html lang="pt-Br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){

    })
  </script>
</head>
<body>

  <form action="/" method="POST">

    <label for="number">Número:</label> <input disabled type="text" name="number" value="<%=infoTabs[0].number%>" id="number"><br><br>
    <label for="action">Ação:</label><select disabled name="action"  value="<%=infoTabs[0].action%>" id="action">
      <option value="Migração pré-controle">Migração pré-controle</option>
      <option value="Migração controle-pós">Migração controle-pós</option>
      <option value="Troca de plano">Troca de plano</option>
      <option value="Migração pré-pós">Migração pré-pós</option>// validar o value do select
    </select><br><br>
    <label for="actuallyPlan">Plano atual:</label><select disabled name="actuallyPlan" value="<%=infoTabs[0].action%>" id="action">
      <option value="ctrl1">ctrl1</option>
      <option value="ctrl2">ctrl2</option>
      <option value="ctrl3">ctrl3</option>
      <option value="ctrl4">ctrl4</option>// validar o value do select
    </select><br><br>
    <label for="newPlan">Plano atual:</label><select disabled name="newPlan" value="<%=infoTabs[0].action%>" id="action">
      <option value="ctrl1">ctrl1</option>
      <option value="ctrl2">ctrl2</option>
      <option value="ctrl3">ctrl3</option>
      <option value="ctrl4">ctrl4</option>
    </select><br><br>
    <label for="obs">Observações:</label><input type="text" disabled name="obs" id="obs"><br><br>
    <label for="os">Número da OS:</label><input type="text"disabled name="os" id="os" value="<%=infoTabs[0].os%>"><br><br>
    <input type="button" disabled value="Salvar venda">
  </form>
  <div id="saco"></div>
</body>
</html>
1
  • Veja se essa pergunta te ajuda. Apesar de ser em PHP, lhe dará uma ideia de como proceder. Commented 17/03/2019 às 20:46

1 Resposta 1

0

Você tem algumas formas de resolver isso.

1. Fazer uma verificação em cada <option>

Usando o operador condicional ternário, você pode atribuir o atributo selected para o <option> desejado. Algo assim:

<label for="actuallyPlan">Plano atual:</label>
<select disabled name="actuallyPlan" id="actuallyPlan">
  <option value="ctrl1" <%= infoTabs[0].action == 'ctrl1' ? 'selected' : ''%>>ctrl1</option>
  <option value="ctrl2" <%= infoTabs[0].action == 'ctrl2' ? 'selected' : ''%>>ctrl2</option>
  <option value="ctrl3" <%= infoTabs[0].action == 'ctrl3' ? 'selected' : ''%>>ctrl3</option>
  <option value="ctrl4" <%= infoTabs[0].action == 'ctrl4' ? 'selected' : ''%>>ctrl4</option>
</select>

2. Usar JavaScript

<label for="actuallyPlan">Plano atual:</label>
<select disabled name="actuallyPlan" id="actuallyPlan">
  <option value="ctrl1">ctrl1</option>
  <option value="ctrl2">ctrl2</option>
  <option value="ctrl3">ctrl3</option>
  <option value="ctrl4">ctrl4</option>
</select>
<script>
  (() => {
    const select = document.querySelector('#actuallyPlan')

    // Note abaixo que estamos atribuindo o valor à uma string,
    // que usaremos em seguida para selecionar a opção desejada.
    const value = '<%= infoTabs[0].action %>'

    select.querySelectorAll('option').forEach((el) => {
      if (el.getAttribute('value') === value) {
        el.selected = true
        break
      }
    })
  })()
</script>

Recomendo você usar a primeira abordagem, já que se o JavaScript não estiver habilitado, a opção será selecionada do mesmo jeito.

Você também pode achar essa abordagem interessante.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .