Avatar billede 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&aelig;lg kendskab</option>
    <option value=1>Godt kendskab</option>
    <option value=2>Begr&aelig;nset kendskab</option>
    <option value=3>Intet eller ringe kendskab</option>
</select>

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

<select name="select2" id="select2" class="form-control">
    <option>V&aelig;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&aelig;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.
Avatar billede 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&aelig;lg kendskab</option>
        <option value=1>Godt kendskab</option>
        <option value=2>Begr&aelig;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>
Avatar billede 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&aelig;nset kendskab", 3:"Intet eller ringe kendskab"};



str='<select name="select1" id="select1"  autofocus="autofocus" class="form-control">';
str += '<option>V&aelig;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>

Avatar billede 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 :)
Avatar billede 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&aelig;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&aelig;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&aelig;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
Avatar billede 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&aelig;nset kendskab", 6:"Intet eller ringe kendskab"};

            function print_array_options(muligheder){
            var str = '<option>V&aelig;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>
Avatar billede 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.
Avatar billede steen_hansen Forsker
20. maj 2021 - 11:39 #7
Rune1983, det virker faktisk perfekt :)
Avatar billede 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 :)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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