How to dynamically assign the selected value of a select with ejs?

Asked

Viewed 373 times

0

Is being sent from the server to this view an object with some information and among them are the values I want to assign to each inputs select, but I cannot assign. I am using ejs as my 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>
javascript html jquery node.js ejs

  • See if that question helps you. Although it is in PHP, it will give you an idea of how to proceed.

1 answer

0

You have some ways to solve this.

1. Make a check on each <option>

Using the ternary conditional operator, you can assign the attribute selected to the <option> desired. Something like this:

<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. Use of 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>

I recommend you use the first approach, since if Javascript is not enabled, the option will be selected the same way.

You can also find that approach interesting.

Browser other questions tagged javascript html jquery node.js ejs

You are not signed in. Login or sign up in order to post.