J'ai une barre de sélection avec quelques options dans lesquelles j'essaie de trier certaines choses et j'essaie également de mettre en œuvre, que si vous cliquez à nouveau sur l'option, elle passera en ordre croissant ou décroissant.

J'ai ces éléments HTML:

<select name="theme" id="sortSelect">
  <option> -
  </option>
  <option value="firstName" data-sort-direction="asc">First Name
  </option>
  <option value="lastName" data-sort-direction="asc">Last Name
  </option>
  <option value="house" data-sort-direction="asc">House
  </option>
</select>

J'obtiens la valeur en JavaScript en utilisant ce mot-clé, j'ai ajouté un écouteur d'événement pour écouter un «changement» et cela conduit à une fonction et à l'intérieur de cette fonction, j'obtiens la valeur comme ceci: const selectedValue = this.value; cela fonctionne parfaitement mais quand j'essaye d'obtenir le data-sort-direction='asc' en JavaScript comme ceci: let sortDirection = this.dataset.sortDirection; alors il retourne undefined. Qu'est-ce que je fais de mal ici? l'aide serait très appréciée!

Edit: ce sont les 2 fonctions que j'utilise:

function getSortedValues() {
  const selectedValue = this.value;
  let sortDirection = this.dataset.sortDirection;
  if (sortDirection === 'asc') {
    this.dataset.sortDirection = 'desc';
  } else {
    this.dataset.sortDirection = 'asc';
  }
  console.log(sortDirection);
  getSortedStudent(selectedValue, sortDirection);
}

function getSortedStudent(pressedValue, sortDirection) {
  let sortedStudents = [];

  let direction = 1;
  if (sortDirection === 'desc') {
    direction = -1;
  } else {
    sortDirection = 1;
  }

  sortedStudents = allStudents.sort((a, b) => {
    if (a[pressedValue] < b[pressedValue]) {
      return -1 * direction;
    } else {
      return 1 * direction;
    }
  });
  displayList(sortedStudents);
}
1
Why u do dis 15 sept. 2020 à 19:38

2 réponses

Meilleure réponse

this.dataset est les data attributs du <select>, pas du <option>. Vous pouvez l'obtenir via:

let sortDirection = this.options[this.selectedIndex].dataset.sortDirection;

Notez que cela peut toujours être undefined, car votre option initiale n'a pas d'attribut data-sort-direction.

6
Domino 15 sept. 2020 à 16:47

Comme mentionné dans la réponse de @Tim Lewis, l'attribut de sélection de valeur change, mais rien d'autre de <option> n'est reporté . Il existe de nombreuses façons de trouver l'élément sélectionné avec des radios, des cases à cocher ou des listes déroulantes, mais ma méthode préférée est le pseudo-sélecteur :checked. Voici un exemple.

var select = document.querySelector('#sortSelect')
select.addEventListener('change', function(e) {
  var selectedOption = document.querySelector('option:checked')
  console.log(this.value, selectedOption.dataset);
})
<select name="theme" id="sortSelect">
  <option> -
  </option>
  <option value="firstName" data-sort-direction="asc">First Name
  </option>
  <option value="lastName" data-sort-direction="asc">Last Name
  </option>
  <option value="house" data-sort-direction="asc">House
  </option>
</select>
2
John Pavek 15 sept. 2020 à 16:52