Если в первом раскрывающемся списке выбран параметр, он будет удален из списка и недоступен для выбора во втором раскрывающемся списке.
Когда новый элемент выбран из второго раскрывающегося списка, он не будет доступен для третьего раскрывающегося списка.
например:
drop_down1: Dog
cat
mouse -->selected
lion
drop_down2: Dog-->selected
cat
lion
drop_down3: cat
lion
Это код, который я придумал, но есть ли более чистый способ сделать это?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ghibli App</title>
<link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="root"></div>
<select id="sel1" onchange="show1(this)">
<option value = "">--Select--</option>
</select>
<select id="sel2" onchange="show2(this)" >
<option value = "">--Select--</option>
</select>
<select id="sel3" onchange="show3(this)">
<option value = "">--Select--</option>
</select>
<select id="sel4">
<option value = "">--Select--</option>
</select>
<script src="script.js"></script>
</body>
</html>
JavaScript:
const app = document.getElementById('root')
const container = document.createElement('div')
container.setAttribute('class', 'container')
var prev = ''
app.appendChild(container)
var opt = []
var request = new XMLHttpRequest()
request.open('GET', 'https://findfalcone.herokuapp.com/planets', true)
request.onload = function() {
// Begin accessing JSON data here
var data = JSON.parse(this.response)
data.forEach(element=>{
opt.push(element)
});
console.log(opt)
populateDrop1()
}
function populateDrop1(){
const dropdown = document.getElementById('sel1')
var i =0
opt.forEach(element => {
const option = document.createElement('option')
option.setAttribute('value','')
option.textContent = element.name
i++
dropdown.appendChild(option)
//console.log(document.getElementById("id").value)
});
}
function populateDrop2(){
//console.log(opt)
const dropdown = document.getElementById('sel2')
var i =0
opt.forEach(element => {
const option = document.createElement('option')
option.setAttribute('value','')
option.textContent = element.name
i++
dropdown.appendChild(option)
//console.log(document.getElementById("id").value)
});
}
function populateDrop3(){
//console.log(opt)
const dropdown = document.getElementById('sel3')
var i =0
opt.forEach(element => {
const option = document.createElement('option')
option.setAttribute('value','')
option.textContent = element.name
i++
dropdown.appendChild(option)
//console.log(document.getElementById("id").value)
});
}
function populateDrop4(){
//console.log(opt)
const dropdown = document.getElementById('sel4')
var i =0
opt.forEach(element => {
const option = document.createElement('option')
option.setAttribute('value','')
option.textContent = element.name
i++
dropdown.appendChild(option)
//console.log(document.getElementById("id").value)
});
}
function show1(ele){
prev = ele.selectedIndex-1
//prev.push(ele.options[ele.selectedIndex].text)
opt.splice(prev,1)
populateDrop2()
}
function show2(ele){
prev = ele.selectedIndex-1
//prev.push(ele.options[ele.selectedIndex].text)
opt.splice(prev,1)
populateDrop3()
}
function show3(ele){
prev = ele.selectedIndex-1
//prev.push(ele.options[ele.selectedIndex].text)
opt.splice(prev,1)
populateDrop4()
}
request.send()