Bonjour tout le monde, j'ai un soucis je vous explique, j'ai deux liste déroulantes lié à ma base de donnée les deux listes permettent de choisir des matières. Et j'aimerai que lorsque que je choisi une matière dans la première liste déroulante quel ne ce ré affiche pas dans le deuxième listes déroulante, par exemple je choisis mathématique dans la première liste je ne veut pas quel s'affiche dans la deuxième.Quelqu'un peut-il m'aider car je suis bloque sur ce point depuis pas mal de temps ? Merci
11484 sujets
JavaScript, DOM et API Web HTML5
Salut,
Bon je t'ai bricolé un truc, n'hésites pas si tu as des questions:
Modifié par stryk (20 Mar 2020 - 12:04)
Bon je t'ai bricolé un truc, n'hésites pas si tu as des questions:
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', function(){
const mySelect1 = document.getElementById("select-1");
addSelectOptions(mySelect1);
const mySelect2 = document.getElementById("select-2");
addSelectOptions(mySelect2);
displaySkills();
});
const addSelectOptions = function (selectElement) {
setFirstOption(selectElement,true);
const skillsArray = getSkillsArray();
for ( let idOption in skillsArray ){
let newOption = document.createElement("option");
newOption.value = skillsArray[idOption];
newOption.text = skillsArray[idOption];
selectElement.appendChild(newOption);
}
};
const setFirstOption = function (thisSelect, activeMode) {
let firstOption = document.createElement("option");
firstOption.selected = activeMode;
firstOption.value = 'Aucune';
firstOption.text = 'Choisir une matière';
thisSelect.appendChild(firstOption);
};
const modifySelectOptions = function (thisId,thisValue) {
let idToModify = thisId == "select-1" ? "select-2" : "select-1";
const selectToModify = document.getElementById(idToModify);
const selectOrigine = selectToModify.value;
selectToModify.innerHTML = "";
const skillsArray = getSkillsArray();
setFirstOption(selectToModify,false);
for ( let idOption in skillsArray ){
if ( thisValue != skillsArray[idOption] ) {
let newOption = document.createElement("option");
newOption.value = skillsArray[idOption];
newOption.text = skillsArray[idOption];
if ( selectOrigine == skillsArray[idOption] ) newOption.selected = true;
selectToModify.appendChild(newOption);
}
}
displaySkills();
};
const displaySkills = function () {
const skill_1 = document.getElementById("select-1").value;
const skill_2 = document.getElementById("select-2").value;
let divText = "Matière 1: " + skill_1 + "<br>";
divText += "Matière 2: " + skill_2 + "<br><br>";
document.getElementById("displaySkills").innerHTML = divText;
};
const getSkillsArray = function () {
const SkillsArray = [
['Mathematiques'],
['Français'],
['Géographie'],
['Histoire'],
['Musique'],
['Chimie'],
['Physique']
];
return SkillsArray;
};
</script>
</head>
<body>
<div id="displaySkills"></div>
<select id="select-1" onchange="modifySelectOptions(this.id,this.value);"></select>
<select id="select-2" onchange="modifySelectOptions(this.id,this.value);"></select>
</body>
</html>
Modifié par stryk (20 Mar 2020 - 12:04)