Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Preencher select

por Patrick Thompson Reis
| 87k xp | 22 posts

Estou criando uma página em que existem vários campos select (14 no total). Todos eles têm as mesmas opções. Minha ideia era preencher esses campos dinamicamente, sem precisar fazer direto no html. Criei um json com as opções e tentei carregar com um arquivo .js. Mas no fim das contas ainda fiquei com um html grande e não está preenchendo o select. abaixo seguem os códigos que talvez facilitem a explicar a minha dúvida

html

<h5>Sábado - Classificação</h5>
        <div class="form-group">
          <label for="drive" class="bet-text-option">Pole</label>
          <select name="drivers" id="drivers" class="form-control drivers-options">
          </select>

          <label for="drive" class="bet-text-option">2º</label>
          <select name="drivers2" id="drivers2" class="form-control drivers-options">
          </select>

          <label for="drive" class="bet-text-option">3º</label>
          <select name="drivers3" id="drivers3" class="form-control drivers-options">
          </select>

          <label for="drive" class="bet-text-option">Q3: 8º</label>
          <select name="drivers4" id="drivers4" class="form-control drivers-options">
          </select>

          <label for="drive" class="bet-text-option">Q2: 13º</label>
          <select name="drivers5" id="drivers5" class="form-control drivers-options">
          </select>

          <label for="drive" class="bet-text-option">Q1: 17º</label>
          <select name="drivers6" id="drivers6" class="form-control drivers-options">
          </select>
        </div>

        <h5>Domingo - Corrida</h5>
        <div class="form-group" class="col">
          <label for="drive" class="bet-text-option">Vencedor</label>
          <select name="drivers7" id="drivers7" class="form-control drivers-options">
          </select>

          <label for="drive" class="bet-text-option">2º</label>
          <select name="drivers8" id="drivers8" class="form-control drivers-options">
          </select>

          <label for="drive" class="bet-text-option">3º</label>
          <select name="drivers9" id="drivers9" class="form-control drivers-options">
          </select>

          <label for="drive" class="bet-text-option">4º</label>
          <select name="drivers10" id="drivers10" class="form-control drivers-options">
          </select>

          <label for="drive" class="bet-text-option">5º</label>
          <select name="drivers11" id="drivers11" class="form-control drivers-options">
          </select>

          <label for="drive" class="bet-text-option">Posição aleatória: 7º</label>
          <select name="drivers12" id="drivers12" class="form-control drivers-options">
          </select>

          <label for="drive" class="bet-text-option">Primeiro Abandono</label>
          <select name="drivers13" id="drivers13" class="form-control drivers-options">
          </select>

          <label for="drive" class="bet-text-option">Volta mais rápida</label>
          <select name="drivers14" id="drivers14" class="form-control drivers-options">
          </select>

          <a href="#" class="btn btn-primary bet-btn">Apostar</a>

      </form>

JS

var select = $('#drivers');
$.getJSON('drivers.JSON', function(data) {
  select.html('');

  for(var i = 0; i < data['drivers'].length; i++) {
    select.append('<option id="' + data['drivers'][i]['id'] + '">' + data['drivers'][i]['name'] + '</option>');
  }
})

var select2 = $('#drivers2');
$.getJSON('drivers.json', function(data) {
  select2.html('');

  for(var i = 0; i < data['drivers'].length; i++) {
    select2.append('<option id="' + data['drivers'][i]['id'] + '">' + data['drivers'][i]['name'] + '</option>');
  }
})

var select3 = $('#drivers3');
$.getJSON('drivers.json', function(data) {
  select3.html('');

  for(var i = 0; i < data['drivers'].length; i++) {
    select3.append('<option id="' + data['drivers'][i]['id'] + '">' + data['drivers'][i]['name'] + '</option>');
  }
})

var select4 = $('#drivers4');
$.getJSON('drivers.json', function(data) {
  select4.html('');

Até o select14

7 respostas
por Patrick Thompson Reis
| 87k xp | 22 posts

O projeto é pessoal, estou criando uma central de apostas de Fórmula 1 que eu e uns amigos fazemos todas as semanas.

Acredito que só falta resolver isso para poder dar um jeito.

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Patrick, tudo bem? O que você poderia fazer é criar uma lacuna no HTML onde serão inseridos os select's e inseri-los todos via JavaScript com um loop, exemplo:

Criando as lacunas no HTML:

<div id="group-selects1"></div>

Ai no JavaScript você poderia percorrer um loop e ir criando os select's e seus option's, algo mais ou menos assim:

const group1 = document.getElementById('group-selects1')

if (group1) {
    group1.innerHTML = ''
    const selectsCount = 10
    Array(selectsCount).fill(null).forEach((_, index) => {
        const optionsCount = 10
        const select = document.createElement('select')
        const position = index + 1;
        select.name = `select-${position}`
        select.id = `select-${position}`
        select.classList.add('alguma-classe')
        select.addEventListener('change', event => {
            console.log('Mudei o valor', event.target.value)
        })

        Array(optionsCount).fill(null).forEach((_, index) => {
            const option = document.createElement('option')
            const position = index + 1;
            option.textContent = `Opção ${position}`
            option.value = `Opção ${position}`
            select.appendChild(option)
        })

        group1.appendChild(select)
    })
}

Isso iria criar 10 select com 10 option em cada um deles, quando o valor de algum deles mudarem, será impresso no console o novo valor.

Espero ter ajudado

por Patrick Thompson Reis
| 87k xp | 22 posts

Oi Matheus, sim, resolveu em partes rs.

O que não consegui fazer foi dar os valores via json.. tenho um arquivo "drivers.JSON" com id e nome dos pilotos. Como faço para alimentar o select com ele?

solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Patrick, nesse caso você pode utilizar a fetch para buscar o dados do json, algo assim:

fetch('./index.json')
  .then(resp => resp.json())
  .then(data => console.log(data)) // aqui tera os valores do json e você pode colocar a lógica de preenchimento dos select's
  .catch(err => console.log(err))

Lembrando que o ./index.json deve ser um caminho até seu json baseado onde está o arquivo .js.

Espero ter ajuodad.

por Patrick Thompson Reis
| 87k xp | 22 posts

Muito obrigado, Matheus!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Magina Patrick, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

por Julio
| 228.7k xp | 3 posts
Desenvolvedor front-end 
window.addEventListener('load', start);

let selects = null;
const arrSelects = [
  {
    name: 'drivers',
    id: 'drivers',
    class: 'form-control drivers-options',
    options: [
      {
        value: 'Value option',
        text: 'text 1'
      },
      {
        value: 'Value option',
        text: 'text 2'
      }
    ]
  }
];

function start() {
  renderSelects();
}

function renderSelects() {
  selects = document.querySelector('#selects');

  arrSelects.forEach(item => {
    selects.innerHTML = `
        <select class="${item.class}" id="${item.id}">
            ${item.options.map(option => renderOption(option))}
        </select>
    `;
  });
}

function renderOption(options) {
  return `<option value="${options.value}">${options.text}</option>`;
}

Olá Patrick, eu faria mais ou menos assim. montando um arrary de objetos e fazendo um forEach e ai vai pode pode setar as keys do objetos para os valores que são necessários para montar o html.