trying to create a single select with array

Asked

Viewed 44 times

0

My goal is to make a single select containing all items in the array.

Below the result:

var categorias = [
    {
        id: 0,
        nome: 'Selecione uma opção',
    },
    {
        id: 1,
        nome: 'Loja online',
    },
    {
        id: 2,
        nome: 'Customização',
    },
    {
        id: 3,
        nome: 'Curso',
    },
    {
        id: 4,
        nome: 'Design',
    }
]

siteIni = () =>{
    
    var trabalhoArea = document.getElementById('trabalhoArea')
    
    categorias.map((val)=>{
        console.log(val.nome)
        trabalhoArea.innerHTML += `
        <select name="categori" id="inputCategori">

            <option>`+val.nome+`</option>

 
        </select>
        
        `

    })

}
siteIni()
body{
    margin: 0%;
    padding: 0%;
    
}
header{
    
    margin-left: 0;
    background-image: url(/photos/1_R042tVT7znwsskasktBg.jpeg);
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-y: 25%;

}



#navBar{
    text-align: right;
    background: #2c3e50;
    width: 100%;

}

li{
    display: inline-block;
    padding: 10pt;
}
#navnav{
    color: white;
    font-family: Noto Sans, sans-serif;
   text-decoration: none;

}
#navBar  a:hover{
    cursor: pointer;
    color: rgb(138, 135, 135);
    text-transform: uppercase;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projeto</title>
    <link rel="stylesheet" href="workSending.css">
</head>
<body>
    <header>
        <div id="navBar">
            <nav>
                <li><a style="  text-decoration-line: underline; font-size: 14pt;" href="../index.html" id="navnav">Inicio</a></li>
                    <li><a href="" id="navnav">Colaboradores</a></li>
                    <li><a href="" id="navnav">Doaçao</a></li>
                    <li><a href="" id="navnav">Forum</a></li>
                    <img src="/photos/kokopelliest_qkR_icon.ico" alt="" width="100pt" style="float: left; padding-left: 20pt;">
                    <h2 style="float: left; margin-top: 10pt; color: white; " id="navnav">Kokopelli </h2>
                    
            </nav>

    </header>
    <main>
        <div id="trabalhoArea">
            <h2>Publique seu trabalho</h2>

            <h3>Escolha sua categoria</h3>
        </div>
    </main>

    <footer>
        <script src="workSending.js"></script>
    </footer>
</body>
</html>

Resultado

javascript

1 answer

1


Let’s create a new select and adjust the attributes name and id as follows:

var select = document.createElement('select');

select.setAttribute('name', 'categori');
select.setAttribute('id', 'inputCategori');

The map is not necessary for categorias. We could use the forEach:

categorias.forEach((val) => {
  const option = document.createElement('option');
  option.innerText = val.nome;

  select.appendChild(option);
});

Explanations:

  • const option = document.createElement('option'); we created a <option></option>;
  • option.innerText = val.nome; his text will be nome of each val.
  • select.appendChild(option); add one more option at the select, without overwriting those that are already there.

Now just add this select to our div trabalhoArea, using once again the appendChild:

trabalhoArea.appendChild(select);

Complete code:

var categorias = [
  {
    id: 0,
    nome: 'Selecione uma opção',
  },
  {
    id: 1,
    nome: 'Loja online',
  },
  {
    id: 2,
    nome: 'Customização',
  },
  {
    id: 3,
    nome: 'Curso',
  },
  {
    id: 4,
    nome: 'Design',
  },
];

siteIni = () => {
  var trabalhoArea = document.getElementById('trabalhoArea');
  var select = document.createElement('select');

  select.setAttribute('name', 'categori');
  select.setAttribute('id', 'inputCategori');

  categorias.forEach((val) => {
    const option = document.createElement('option');
    option.innerText = val.nome;

    select.appendChild(option);
  });

  trabalhoArea.appendChild(select);
};
siteIni();
body {
  margin: 0%;
  padding: 0%;
}
header {
  margin-left: 0;
  background-image: url(/photos/1_R042tVT7znwsskasktBg.jpeg);
  background-position-x: center;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-y: 25%;
}

#navBar {
  text-align: right;
  background: #2c3e50;
  width: 100%;
}

li {
  display: inline-block;
  padding: 10pt;
}
#navnav {
  color: white;
  font-family: Noto Sans, sans-serif;
  text-decoration: none;
}
#navBar a:hover {
  cursor: pointer;
  color: rgb(138, 135, 135);
  text-transform: uppercase;
}
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Projeto</title>
    <link rel="stylesheet" href="workSending.css" />
  </head>
  <body>
    <header>
      <div id="navBar">
        <nav>
          <li>
            <a
              style="text-decoration-line: underline; font-size: 14pt"
              href="../index.html"
              id="navnav"
              >Inicio</a
            >
          </li>
          <li><a href="" id="navnav">Colaboradores</a></li>
          <li><a href="" id="navnav">Doaçao</a></li>
          <li><a href="" id="navnav">Forum</a></li>
          <img
            src="/photos/kokopelliest_qkR_icon.ico"
            alt=""
            width="100pt"
            style="float: left; padding-left: 20pt"
          />
          <h2 style="float: left; margin-top: 10pt; color: white" id="navnav">
            Kokopelli
          </h2>
        </nav>
      </div>
    </header>
    <main>
      <div id="trabalhoArea">
        <h2>Publique seu trabalho</h2>

        <h3>Escolha sua categoria</h3>
      </div>
    </main>

    <footer>
    </footer>
  </body>
</html>

  • Note: always use let and const instead of var.

Browser other questions tagged javascript

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