CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript 4 24/06/202422:50 26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript 6 04/06/202416:23 05/06/202414:23
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 18:09 Billedoverførsel Af Laurids i iOS, iPhone & iPad
I går 13:30 Hvordan ændres UniFi Dream Machine UDM til switch mode Af Kasper4450 i Internetforbindelser
I går 13:01 Film går i stå midt i afspilningen Af ole falsted i Musik & videoafspillere
I går 11:40 Fjerne mappe i stifinder Af Peter Olsen i Andet software
I går 11:27 renteberegning Af Pil i Excel
White papers
Flere white papers »


Premium
Teaser billede
Vil købe tele-løsninger til det offentlige for 370 millioner kroner
Læs mere »
Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"
Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen
Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet
Se alle »
Computerworld
Teaser billede
Microsofts nye pc er ekstrem billig – men kan blive ekstrem sikker og fleksibel
Læs mere »
Test: Prøv kun disse B&O-hovedtelefoner, hvis du har råd
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Telegigant klar med AI-baseret mormor: Holder telefon-svindlere fast i røret med sniksnak og dumme spørgsmål
Se alle »
CIO
Teaser billede
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Læs mere »
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Microsofts store årlige event: De tre vigtigste nøglebudskaber fra Satya Nadella om Microsofts fremtid
Tre vigtige erkendelser, som Computerworld tog med hjem fra Gartners store topmøde i Barcelona
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Topchef Sara Green mener, at der er brug for et radikalt nyt syn på it-ledelse - særligt én ny trend hader hun som pesten
Se alle »
White paper
Teaser billede
MDR: Transparent sikkerhed og overvågning i realtid
Læs mere »
SMB og cybertrusler: Brug sikkerhedsressourcerne optimalt
Managed Detection & Response: Forsvar din virksomhed mod cybertrusler døgnet rundt
Er din cybersikkerhed klar til AI-revolutionen?
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »