Jump to content
Biel.

itens do select

Recommended Posts

Olá pessoal. O código abaixo não está funcionando, mas está perto. Quero muito mover os itens do select pra cima e pra baixo com ajuda da seta. 

<style>
  .principal {
    max-width: 300px;
    width: 100%;
    margin: auto;
    display: flex; flex-wrap: wrap; align-items: center;
    border: 2px solid blue;
  }

  .boxCarros {
    flex: 2;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: transparent;
    border: 4px solid orange;
  }


  .class1 {
    cursor: default;
    font-size: 20px;
  }

  .class1:hover {
    border: 0px solid #c1c1c1;
  }

  .class1:active {
    border: 0px solid #c1c1c1;
  }



  .boxSeta {
    /* margin:0 auto; */
    flex: 0.5;
    font-size: 30px;
    text-align: center;
    padding: 4px;
    /* border: 4px solid orange; */
  }

  .seta {
    max-width: 60px;
    margin: auto;
    margin-bottom: 4px;
    background-color: #cfcfcf;
    display: block;
    cursor: default;
  }

  .seta:hover {
    background: #000;
    color: #fff;
    cursor: default;
  }


</style>

...

    <div class="principal">
   
            <div class="boxCarros">
            <select name="" id="carros" class=""  size="4" >
            <option value="gol" class="class1">gol</option>
            <option value="fiat" class="class1">fiat</option>
            <option value="palio" class="class1">palio</option>
            <option value="corsa" class="class1">corsa</option>
            </select>
            </div>

          <div class="boxSeta">
            <div id="id1" class="seta"></div>
            <div id="id2" class="seta"></div>
          </div>
   
    </div>

 

...

<script>

  let indexSelected;
  let elementSelected;
  let boxCarros = document.querySelector(".boxCarros");
  let arrowUp = document.querySelector("#id1");
  let arrowDown = document.querySelector("#id2");

  function setaPraCima() {
    let x = document.querySelectorAll(".class1");
    indexSelected = returnPositionIndex(indexSelected - 1);
    boxCarros.insertBefore(elementSelected, x[indexSelected]);
  }

  function setaPraBaixo() {
    let y = document.querySelectorAll(".class1");
    indexSelected = returnPositionIndex(indexSelected + 1);
    boxCarros.insertBefore(elementSelected, y[indexSelected].nextSibling);
  }

    function returnPositionIndex(index) {

    let min = 0,
        max = 3;

    if (index <= min) {
    return min;
    }

    if (index >= max) {
    return max;
    }

    if (index > min || index < max) {
    return index;
    }

    }


    function selectItem(refItem) {

  }

  boxCarros.addEventListener("click", selectItem);
  arrowUp.addEventListener("click", setaPraCima);
  arrowDown.addEventListener("click", setaPraBaixo);

</script>

 

Share this post


Link to post
Share on other sites

Olá!
Segue sugestão:
https://codepen.io/washalbano/pen/NWELpbv
 

let selectedElement
const arrowUp = document.getElementById('id1')
const arrowDown = document.getElementById('id2')

// define o elemento select
const select = document.getElementById('carros')

// quando o select sofrer alteração
select.onchange = (e) => {
  // define o index selecionado
  const selectedIndex = e.target.selectedIndex
  selectedElement = select.options[selectedIndex]
}

function setaPraCima() {
  if ((prevElement = selectedElement.previousElementSibling)) {
    select.insertBefore(selectedElement, prevElement)
  }
}

function setaPraBaixo() {
  if ((nextElement = selectedElement.nextElementSibling)) {
    select.insertBefore(nextElement, selectedElement)
  }
}

arrowUp.onclick = setaPraCima
arrowDown.onclick = setaPraBaixo

 

Share this post


Link to post
Share on other sites
document.addEventListener('DOMContentLoaded', function () {
  const arrowUp = document.getElementById('id1');
  const arrowDown = document.getElementById('id2');
  const select = document.getElementById('carros');

  function updateSelectedElement() {
    const selectedIndex = select.selectedIndex;
    selectedElement = select.options[selectedIndex];
  }

  select.onchange = updateSelectedElement;

  let selectedElement;

  function setaPraCima() {
    if (selectedElement && (prevElement = selectedElement.previousElementSibling)) {
      select.insertBefore(selectedElement, prevElement);
      updateSelectedElement();
    }
  }

  function setaPraBaixo() {
    if (selectedElement && (nextElement = selectedElement.nextElementSibling)) {
      select.insertBefore(selectedElement, nextElement.nextSibling);
      updateSelectedElement();
    }
  }

  arrowUp.onclick = setaPraCima;
  arrowDown.onclick = setaPraBaixo;

  updateSelectedElement(); 
});
<h4>Quero mover os itens do select pra cima e pra baixo com ajuda da seta </h4>
  <div class="principal">

    <div class="boxCarros">
      <select name="" id="carros" class="" size="4">
        <option value="gol" class="class1" selected>gol</option>
        <option value="fiat" class="class1">fiat</option>
        <option value="palio" class="class1">palio</option>
        <option value="corsa" class="class1">corsa</option>
      </select>
    </div>

    <div class="boxSeta">
      <div id="id1" class="seta"></div>
      <div id="id2" class="seta"></div>
    </div>

  </div>

 

Share this post


Link to post
Share on other sites
Em 24/07/2023 at 17:50, washalbano disse:

Olá!
Segue sugestão:
https://codepen.io/washalbano/pen/NWELpbv
 


let selectedElement
const arrowUp = document.getElementById('id1')
const arrowDown = document.getElementById('id2')

// define o elemento select
const select = document.getElementById('carros')

// quando o select sofrer alteração
select.onchange = (e) => {
  // define o index selecionado
  const selectedIndex = e.target.selectedIndex
  selectedElement = select.options[selectedIndex]
}

function setaPraCima() {
  if ((prevElement = selectedElement.previousElementSibling)) {
    select.insertBefore(selectedElement, prevElement)
  }
}

function setaPraBaixo() {
  if ((nextElement = selectedElement.nextElementSibling)) {
    select.insertBefore(nextElement, selectedElement)
  }
}

arrowUp.onclick = setaPraCima
arrowDown.onclick = setaPraBaixo

 

washalbano, funcionou bem. Obrigado !

Em 25/07/2023 at 08:44, Marcos_imasters disse:

document.addEventListener('DOMContentLoaded', function () {
  const arrowUp = document.getElementById('id1');
  const arrowDown = document.getElementById('id2');
  const select = document.getElementById('carros');

  function updateSelectedElement() {
    const selectedIndex = select.selectedIndex;
    selectedElement = select.options[selectedIndex];
  }

  select.onchange = updateSelectedElement;

  let selectedElement;

  function setaPraCima() {
    if (selectedElement && (prevElement = selectedElement.previousElementSibling)) {
      select.insertBefore(selectedElement, prevElement);
      updateSelectedElement();
    }
  }

  function setaPraBaixo() {
    if (selectedElement && (nextElement = selectedElement.nextElementSibling)) {
      select.insertBefore(selectedElement, nextElement.nextSibling);
      updateSelectedElement();
    }
  }

  arrowUp.onclick = setaPraCima;
  arrowDown.onclick = setaPraBaixo;

  updateSelectedElement(); 
});

<h4>Quero mover os itens do select pra cima e pra baixo com ajuda da seta </h4>
  <div class="principal">

    <div class="boxCarros">
      <select name="" id="carros" class="" size="4">
        <option value="gol" class="class1" selected>gol</option>
        <option value="fiat" class="class1">fiat</option>
        <option value="palio" class="class1">palio</option>
        <option value="corsa" class="class1">corsa</option>
      </select>
    </div>

    <div class="boxSeta">
      <div id="id1" class="seta"></div>
      <div id="id2" class="seta"></div>
    </div>

  </div>

 

Marcos, funcionou bem. Obrigado !

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Biel.
      Olá pessoal. Ao digitar um texto qualquer no input e pressionar submit o valor do atributo href é alterado temporariamente. Como alterar permanentemente no corpo do documento  o valor do atributo href, digitando um nome de link qualquer no campo input e em seguida submit ?
      <!DOCTYPE html> <html> <head> <style> input { width: 100%; font-size: 20px; } textarea { width: 100%; font-size: 16px; height: 200px; } .class88 { margin-top: 50px; padding: 10px; max-width: 100px; } </style> </head> <body> <h2> alterar valor do atributo href</h2> digite um texto qualquer <input type="text" class="class42" value=""> <a id="linkToChange" href="teste5.php" class="class43"></a> <input type="submit" class="class88" value="enviar" onclick="alterarHref()"> <script> function alterarHref() { // pega o valor da class42 var valorDaclass42 = document.querySelector('.class42').value.trim(); // altera o valor do atributo href para o valorDaclass42 sugerido document.querySelector('.class43').setAttribute('href', valorDaclass42); console.log("Href alterado:", valorDaclass42); } </script> </body> </html>  
    • By Biel.
      Olá pessoal. BannerA está funcionando normalmente. Como usar mesmo script para bannerB e bannerC.
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner Aleatório</title> <style> /* Estilos opcionais para o banner */ #divPai { margin: auto; border: 2px solid red; } #bannerA { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerA img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } #bannerA img.active { opacity: 1; } </style> </head> <body> <div id="divPai"> <div id="bannerA" class="bannerA"> <a href="link1"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3"><img src="image3.jpg" alt="Imagem 3"></a> </div> <!-- <hr> <div id="bannerB" class="bannerB"> <a href="link4"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5"><img src="image5.jpg" alt="Imagem 5"></a> <a href="link6"><img src="image6.jpg" alt="Imagem 6"></a> </div> <hr> <div id="bannerC" class="bannerC"> <a href="link7"><img src="image7.jpg" alt="Imagem 7"></a> <a href="link8"><img src="image8.jpg" alt="Imagem 8"></a> <a href="link9"><img src="image9.jpg" alt="Imagem 9"></a> </div> --> </div> <hr> <script> document.addEventListener("DOMContentLoaded", function() { // var banner = document.getElementById("divPai"); // var images = banner.querySelectorAll("img"); var images = document.querySelectorAll("#bannerA img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 1000); // makeSliderKind('.bannerA', 1000); // makeSliderKind('.bannerB', 2000); // makeSliderKind('.bannerC', 3000); }); </script> </body> </html>  
    • By Biel.
      Olá pessoal. O banner abaixo está funcionando e o link acompanha o banner, até aqui tudo ok ! Quero muito fazer uma transição suave entre uma image e outra, colocando as propiedades e valores no css ou diretamente no javascript e nada de propiedades e valores no html através do style . Se possível coloque no código somente o que precisa . Obrigado!
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner</title> <style> /* Estilos opcionais para o banner */ .banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } .banner img.active { opacity: 1; } </style> </head> <body> <div class="banner" id="banner"> <a href="link1" class="ggg"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2" class="ggg"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3" class="ggg"><img src="image3.jpg" alt="Imagem 3"></a> <a href="link4" class="ggg"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5" class="ggg"><img src="image5.jpg" alt="Imagem 5"></a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var banner = document.getElementById("banner"); var images = banner.querySelectorAll("img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 3000); }); </script> </body> </html>  
       
    • By Biel.
      Olá pessoal. O banner abaixo está funcionando normalmente, mas a transição entre uma imagem e outra está um tanto truculenta. Quero deixar suave. Como resolver isso? Obrigado !
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transition suave entre uma image e outra</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerGG { width: 100%; height: auto; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } /* #tete:active { opacity: 1; } */ </style> </head> <body> <div id="banner"> <img class="bannerGG" src="imagem1.png" alt="Image 1"> <img class="bannerGG" src="imagem2.png" alt="Image 2"> <img class="bannerGG" src="imagem3.png" alt="Image 3"> <img class="bannerGG" src="imagem4.png" alt="Image 4"> <img class="bannerGG" src="imagem5.png" alt="Image 5"> </div> <script> const image = document.querySelectorAll('.bannerGG'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * image.length); const randomImage = image[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; const linkElement = document.createElement('a'); linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 3000); </script> </body> </html>  
    • By Biel.
      Olá pessoal. O banner abaixo está funcionando, mas quero que o link do banner venha da tag a  e não do javascript . Como resolver? 
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mostrar link do banner que está na tag a</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-img { width: 100%; height: 100%; object-fit: cover; position: absolute; /* opacity: 0; */ transition: opacity 0.5s ease-in-out; } .banner-link { display: block; width: 100%; height: 100%; } </style> </head> <body> <div id="banner"> <a href="link147"><img class="banner-img" src="imagem1.png" alt="Image 1"></a> <a href="link254"><img class="banner-img" src="imagem2.png" alt="Image 2"></a> <a href="link350"><img class="banner-img" src="imagem3.png" alt="Image 3"></a> <a href="link462"><img class="banner-img" src="imagem4.png" alt="Image 4"></a> <a href="link538"><img class="banner-img" src="imagem5.png" alt="Image 5"></a> </div> <script> const images = document.querySelectorAll('.banner-img'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * images.length); const randomImage = images[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; imgElement.alt = randomImage.alt; imgElement.classList.add('banner-img'); const linkElement = document.createElement('a'); // linkElement.appendChild(imgElement); linkElement.href = randomImage.href; linkElement.classList.add('banner-link'); linkElement.href = "page" + (randomIndex + 1) + ".html"; // Link para cada imagem linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 1000); </script> </body> </html> Resolvido,  Obrigado a todos !
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.