itens do select

[Biel. 9]

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>

 

[tetsuo 0]

Consegue colocar num codepen ou num github pages pra gente ver como tá ficando?

[Biel. 9]

Em 19/07/2023 at 02:06, tetsuo disse:

Consegue colocar num codepen ou num github pages pra gente ver como tá ficando?

Tetsuo, segue o link https://jsbin.com/hegakev/edit?html,css,js,output

[washalbano 54]

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

 

[Marcos_imasters 288]

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>

 

[Biel. 9]

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 !