CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

steen_hansen Forsker

03. maj 2021 - 00:19 Der er 6 kommentarer og
2 løsninger

Hvordan udelukkes valgt option fra select #2, når den er valgt i select#1

Jeg har 3 select's, hvor brugeren skal sætte en prioritet på 3 emner.

<select name="select1" id="select1" autofocus="autofocus" class="form-control">
<option>Vælg kendskab</option>
<option value=1>Godt kendskab</option>
<option value=2>Begrænset kendskab</option>
<option value=3>Intet eller ringe kendskab</option>
</select>

Hvis jeg vælger "Begrænset kendskab" (nummer 2), skal valgmulighederne i select2 være 1 og 3

<select name="select2" id="select2" class="form-control">
<option>Vælg kendskab</option>
<option value=1>Godt kendskab</option>
<option value=3>Intet eller ringe kendskab</option>
</select>

Hvis jeg vælger "Godt kendskab" (nummer 1) i select2, vil den resterende valgmulighed i select3 så være 3

<select name="select3" id="select3" class="form-control">
<option>Vælg kendskab</option>
<option value=3>Intet eller ringe kendskab</option>
</select>

Brugeren SKAL prioritere 3 emner med 3 unikke svar: 1, 2 eller 3. Brugeren må ikke vælge 1 i select1, 1 i select2 og 2 i select3. Det SKAL være 1, 2 og 3 for de 3 emner. Her tænker jeg man kan lave javascript, som tjekker hvad der valgt i de respektive select's.

Synes godt om

Rune1983 Ekspert

03. maj 2021 - 09:11 #1

Prøv dette. Ved ikke helt om jeg har forstået dit problem helt. Men som jeg ser det dit spørgsmål er at alle 3 skal bruges. Men du er interesseret i rækkefølgende.

<select name="select1" id="select1" onchange="setOptionsSelect1(this.options[this.selectedIndex].value);" autofocus="autofocus" class="form-control">
<option>Vælg kendskab</option>
<option value=1>Godt kendskab</option>
<option value=2>Begrænset kendskab</option>
<option value=3>Intet eller ringe kendskab</option>
</select><br />
<select name="select2" id="select2" onchange="setOptionsSelect2(this.options[this.selectedIndex].value);" class="form-control"></select><br />
<select name="select3" id="select3" class="form-control"></select>
<script>
function setOptionsSelect1(chosen) {
var select2 = document.getElementById('select2');
var select3 = document.getElementById('select3');
select3.options.length = 0;

select2.options.length = 0;
if (chosen == '') {
select2.options[select2.options.length] = new Option('Vælg','');
}
if(chosen == '1'){
select2.options[select2.options.length] = new Option('Vælg','');
select2.options[select2.options.length] = new
Option('Begrænset kendskab','2');
select2.options[select2.options.length] = new
Option('Intet eller ringe kendskab','3');
}
if(chosen == '2'){
select2.options[select2.options.length] = new Option('Vælg','');
select2.options[select2.options.length] = new
Option('Godt kendskab','1');
select2.options[select2.options.length] = new
Option('Intet eller ringe kendskab','3');
}
if(chosen == '3'){
select2.options[select2.options.length] = new Option('Vælg','');
select2.options[select2.options.length] = new
Option('Godt kendskab','1');
select2.options[select2.options.length] = new
Option('Begrænset kendskab','2');
}
}
function setOptionsSelect2(chosen) {
var select3 = document.getElementById('select3');
var selectedValueSelect1 = document.getElementById('select1').options[document.getElementById('select1').selectedIndex].value;

select3.options.length = 0;
if (chosen == '') {
//select3.options[select3.options.length] = new Option('Vælg','');
}
if(chosen == '1'){
//select3.options[select3.options.length] = new Option('Vælg','');
if(selectedValueSelect1 == '2'){
select3.options[select3.options.length] = new
Option('Intet eller ringe kendskab','3');
}
if(selectedValueSelect1 == '3'){
select3.options[select3.options.length] = new
Option('Begrænset kendskab','2');
}
}
if(chosen == '2'){
//select3.options[select3.options.length] = new Option('Vælg','');
if(selectedValueSelect1 == '1'){
select3.options[select3.options.length] = new
Option('Intet eller ringe kendskab','3');
}
if(selectedValueSelect1 == '3'){
select3.options[select3.options.length] = new
Option('Godt kendskab','1');
}
}
if(chosen == '3'){
//select3.options[select3.options.length] = new Option('Vælg','');
if(selectedValueSelect1 == '1'){
select3.options[select3.options.length] = new
Option('Begrænset kendskab','2');
}
if(selectedValueSelect1 == '2'){
select3.options[select3.options.length] = new
Option('Godt kendskab','1');
}
}
}
</script>

Synes godt om

1 synes godt om dette

olsensweb.dk Ekspert

03. maj 2021 - 12:57 #2

jeg ville lægge mulighederne ind i et array, og udskrive det, og efter valg, fjerne det fra arrayet, og derefter udskrive arrayet igen
noget ala

<p id="demo"></p>

<script>
var muligheder = {1:"Godt kendskab", 2:"Begrænset kendskab", 3:"Intet eller ringe kendskab"};

str='<select name="select1" id="select1" autofocus="autofocus" class="form-control">';
str += '<option>Vælg kendskab</option>';
Object.keys(muligheder).forEach(function(key) {
str += '<option value='+key+'>'+muligheder[key]+'</option>';
});
str += '</select>';
document.getElementById("demo").innerHTML = str;

// mangler:

// her skal den valgte mulighed fjernes fra arrayet

// udskriv array igen

</script>

Synes godt om

steen_hansen Forsker

03. maj 2021 - 14:23 #3

@Rune1983 & olsensweb.dk:

Jeg skulle måske have nævnt, at det skal ske, når man tabulerer fra select1 til select2 til select3. Der er inden der bliver trykket submit.

Jeg tester det af senere og vender tilbage. Foreløbigt 1000 tak for svar :)

Synes godt om

olsensweb.dk Ekspert

03. maj 2021 - 15:42 #4

her er lidt du kan lege med, kan og bør optimeres

<!doctype html>
<html lang="da">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function print_array(){
// udskriv array igen
str='<select name="select2" id="select2" class="form-control">';
str += '<option>Vælg kendskab</option>';
Object.keys(muligheder).forEach(function(key) {
str += '<option value='+key+'>'+muligheder[key]+'</option>';
});
str += '</select>';
document.getElementById("demo2").innerHTML = str;
}

function remove_element(elm){
// her fjernes den valgte mulighed fra arrayet
// lægger mulighedderne over i et nyt array, undtagen den valgte
nye_muligheder=[];
Object.keys(muligheder).forEach(function(key) {
if (key != elm){
nye_muligheder[key]=muligheder[key];
}
});
//overskriver det oprindelige array
muligheder=nye_muligheder;

print_array();
}

function myFunction(){
var e = document.getElementById("select1");
var value = e.value;
remove_element(value);
print_array();
}

var muligheder = {1:"Godt kendskab", 2:"Begrænset kendskab", 3:"Intet eller ringe kendskab"};

// udskriv array
str='<select name="select1" id="select1" autofocus="autofocus" class="form-control" onchange="myFunction()">';
str += '<option>Vælg kendskab</option>';
Object.keys(muligheder).forEach(function(key) {
str += '<option value='+key+'>'+muligheder[key]+'</option>';
});
str += '</select>';
document.getElementById("demo1").innerHTML = str;
</script>
</body>
</html>

du kan med fordel google
https://www.google.com/search?q=javascript+cascade+select+list

Synes godt om

olsensweb.dk Ekspert

04. maj 2021 - 10:10 #5

jeg har optimeret coden, ved at lave det i functioner.

<!doctype html>
<html lang="da">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var muligheder = {1:"Godt kendskab", 4:"Begrænset kendskab", 6:"Intet eller ringe kendskab"};

function print_array_options(muligheder){
var str = '<option>Vælg kendskab</option>';
Object.keys(muligheder).forEach(function(key) {
str += '<option value='+key+'>'+muligheder[key]+'</option>';
});
return str;
}

function print_select1(){
var str='<select name="select1" id="select1" autofocus="autofocus" class="form-control" >';
str += print_array_options(muligheder);
str += '</select>';
document.getElementById("demo1").innerHTML = str;
}

function print_select2(){
// udskriv array igen
var str='<select name="select2" id="select2" class="form-control">';
str += print_array_options(muligheder);
str += '</select>';
document.getElementById("demo2").innerHTML = str;
}

function remove_element(elm, arr){
// her fjernes den valgte mulighed fra arrayet
Object.keys(arr).forEach(function(key) {
// https://stackoverflow.com/questions/3455405/how-do-i-remove-a-key-from-a-javascript-object
if (key == elm){
delete arr[key];
}
});
return arr;
}

print_select1();
document.getElementById("select1").addEventListener("change", function (evt) {
muligheder=remove_element(this.value, muligheder);
print_select2();
});
</script>
</body>
</html>

Synes godt om

1 synes godt om dette

steen_hansen Forsker

20. maj 2021 - 00:00 #6

@Rune1983: Det ser fornuftigt ud, og du skal have mange tak for dit svar :) Jeg tror dog jeg arbejder videre med olsensweb.dk's forslag. Men jeg har fanget din idé, selvom JavaScript ikke er min stærke side.

@olsensweb.dk: Det ser rigtigt godt ud. Der mangler dog den sidste mulighed, dit script viser kun de første 2 valg, den sidste mulighed kommer ikke frem.

Jeg har så fået gennemtænkt det endnu bedre, efter jeg har prøvet at sætte det op efter din anvisning, og set det i funktion:

Det kan jo være, at kendskaberne ændres med tiden, hvis den pågældende uddaner sig bedre/udvikler sig, så der skal rykkes om på prioriteterne. Det vil jo ikke kunne ændres, vil det? Jeg vil skyde på, at indholdet af alle 3 recordsets skal slettes, før man kan lave en ny (om)prioritering. Er det ikke korrekt?

Jeg kan også se, at det kan laves smartere med inline, så man får én række, og ikke 3 under hinanden. Jeg prøver lige at hente HTML/kode lidt senere, jeg håber jeg kan nå det i aften.

Jeg skal lige nævne, at det fungerer i praksis, som jeg har lavet det i første omgang ved at lave tjeks på, om der er nogle af de tre settings, som har samme prioritering. Så bliver brugeren bedt om at rette det. Men tanken var, at det er smartere, hvis vi slet ikke kommer ud, hvor der er mulighed for brugerfejl.

Synes godt om

steen_hansen Forsker

20. maj 2021 - 11:39 #7

Rune1983, det virker faktisk perfekt :)

Synes godt om

1 synes godt om dette

steen_hansen Forsker

21. maj 2021 - 23:27 #8

I skal have 1000 tak for hjælpen begge to. Jeg valgte Rune1983's forslag, den sidder lige i skabet. Og olsensweb.dk's forslag er også fine, jeg lærte en del. Tak for hjælpen, begge to :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Beregning af sum via PHP og SQL Af dane022 i JavaScript	3	10/02/202421:38	12/02/202409:41
Kode der tjekker telefonnummer i formular Af Asky i JavaScript	2	27/12/202321:42	28/12/202314:41
Nogle af mine formularer i PHP er plaget af spam Af Asky i JavaScript	12	19/12/202313:31	10/01/202411:04
Vis data fra en anden fil i en div Af EveryMA i JavaScript	2	19/10/202307:02	20/10/202307:02
js til asp backend Af keepy i JavaScript	1	11/10/202310:28	11/10/202313:46

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS