Søg
Avatar billede Slettet bruger
21. marts 2011 - 19:12 Der er 8 kommentarer og
1 løsning

Find forrige option, ved ændring i select

Hejsa!

Jeg sidder og laver en lille funktion som skal opdatere en pris alt efter hvilken option man vælger i en select. Funktionen skal gerne være dynamisk og skal derfor ikke gemme på den forrige værdi.
Jeg har fundet denne side http://jsfiddle.net/AndyE/x5PKf/ hvor det ser ud til at det virker - men jeg forstår bare ikke rigtig koden. Det ser måske ud til at onfocus og onchange er kombineret??

Min kode ser ind til videre således ud:
<html>
<head>
<script type="text/javascript">
    function updatePrice( elementClicked){
        var currentPrice = parseInt(document.getElementById('pris').innerHTML);
        var currentOption = elementClicked.selectedIndex;
        //var previousOption = ?
        alert("Funktionen er kaldt");
    }
</script>
</head>
<body>
<select id="sel" onchange="java script:updatePrice(this)">
    <option value="num1">Num1</option>
    <option value="num2">Num2</option>
</select>
<p id="pris">100</p>
</body>
</html>
Avatar billede olebole Juniormester
21. marts 2011 - 20:44 #1
<ole>

Hvad er det, du vil? Jeg kan ikke se nogen sammenhæng mellem dine options og prisen, så det er ikke til at gætte, hvad der præcist skal ske

/mvh
</bole>
Avatar billede Slettet bruger
21. marts 2011 - 21:51 #2
Ok, skal se om jeg kan gøre det mere klart. Her er koden igen hvor jeg har prøvet at komme med et eksempel på hvad der skal ske med prisen.

<html>
<head>
<script type="text/javascript">
    function updatePrice( elementClicked){
        var currentPrice = parseInt(document.getElementById('pris').innerHTML);
        var currentOption = elementClicked.selectedIndex;
        var previousOption = 0; // Skal variere.
       
        var addPrice = new Array();
        addPrice[0] = 0;
        addPrice[1] = 50;
        addPrice[2] = 40;
       
        var newPrice = currentPrice - addPrice[previousOption] + addPrice[currentOption];
        document.getElementById('pris').innerHTML = newPrice;
    }
</script>
</head>
<body>
<select id="sel" onchange="java script:updatePrice(this)">
    <option value="num1">Num1</option>
    <option value="num2">Num2</option>
    <option value="num3">Num3</option>
</select>
<p id="pris">100</p>
</body>
</html>
Avatar billede olebole Juniormester
21. marts 2011 - 22:00 #3
Jeg kan se noget kode - men den siger mig intet om, hvad du vil. Når du selv ved, din kode ikke virker, giver det ikke mening, at du anser den for at være forklarende. Tal til mig ... brug ord!  *o)
Avatar billede Slettet bruger
21. marts 2011 - 22:14 #4
Hehe! Ord:
I den kode jeg har leveret har jeg defineret variablen previuosOption til at være 0. Denne variabel ønsker jeg imidlertid skal indeholde indexet på den option der var valgt lige før at funktionen blev kaldt. Altså hvis option num2 er valgt og jeg nu ændrer den til num3 skal variablen previuosOption indeholde indexet for option num2, hvilket i dette tilfælde må være 1. Det er altså at få opdateret previuosOption der er mit problem - resten af koden virker fint.

Gav det mening?
Avatar billede olebole Juniormester
21. marts 2011 - 23:19 #5
Yups  =)

Du kunne gøre noget à la:


<script type="text/javascript">
var previousOption = 0;
function updatePrice(elementClicked) {
    var tmp = elementClicked.getAttribute("last");
    previousOption = tmp ? tmp : 0;
    elementClicked.setAttribute("last", elementClicked.selectedIndex);
   
    // Resten af din kode
}
</script>

<select id="sel" onchange="updatePrice(this)">
    <option value="num1">Num1</option>
    <option value="num2">Num2</option>
    <option value="num3">Num3</option>
</select>

Avatar billede olebole Juniormester
21. marts 2011 - 23:22 #6
Jeg har erklæret variablen udenfor funktionen, da jeg går udfra, det er her, den skal bruges. Erklærer du den med var i funktionen, kan den kun læses indenfor denne.

Læg også mærke til, jeg kun skriver funktionskaldet i onchange handleren. JavaScript pseudoprotokollen er beregnet til brug i f.eks. et links href. Event handlers kan ikke andet end afvikle JS, så der giver den ikke mening der  *o)
Avatar billede Slettet bruger
22. marts 2011 - 07:39 #7
Ja det ville helt sikkert virke i dette tilfælde. Men nu vil jeg så tillade mig at gøre problemet lidt besværligt ved at stille to yderligere krav:
1. Funktionen skal understøtte er variabelt antal select's, altså kunne være der var to eller tre select's på en side.
2. Den option der er valgt til at starte med er variabel.
Lad os nu fx sige at jeg har to select's og at jeg i den første starter med at option to er valgt og i den anden starter med at option 3 er valgt. Den grundlæggende pris er stadig 100, men da der fra starten er valgt to option's der ændrer prisen, bliver den nye startpris altså 190, hvis vi følger det tidligere eksempel. Så ville min body måske se sådan ud:

<select id="sel_1" onchange="updatePrice(this)">
    <option value="num1">Num1</option>
    <option value="num2" selected="selected">Num2</option>
    <option value="num3">Num3</option>
</select>

<select id="sel_2" onchange="updatePrice(this)">
    <option value="num1">Num1</option>
    <option value="num2">Num2</option>
    <option value="num3">Num3 selected="selected"</option>
</select>

<p id="pris">190</p>

Forresten, hvordan laver den fine kasse rundt om din kode?
Avatar billede Slettet bruger
22. marts 2011 - 07:41 #8
Hov, jeg har vidst fået sat min selected="selected" lidt forkert ind i sel_2, men tror stadig det overordnede spørgsmål kan forstås.
Avatar billede Slettet bruger
24. juni 2011 - 10:54 #9
Nå så er det vist også på tide at få lukket denne tråd. Jeg fandt selv en løsning på problemet - ved ikke om det kan gøres smartere men det virker.

<html>
<head>

<script type="text/javascript">
           
    var previousOption = 0;

    function setPreviousOption(element){
        previousOption = element.selectedIndex;
    }

    function updatePrice(element){
        var currentPrice = parseInt(document.getElementById('pris').innerHTML);
       
        var currentOption = element.selectedIndex;
       
        var addPrice = new Array();
        addPrice[0] = 0;
        addPrice[1] = 50;
        addPrice[2] = 40;

        var newPrice = currentPrice - addPrice[previousOption] + addPrice[currentOption];
        document.getElementById('pris').innerHTML = newPrice;
       
        previousOption = currentOption;
    }

</script>

</head>
<body>

<select id="sel" onfocus="setPreviousOption(this)" onchange="updatePrice(this)">
    <option value="num1">Num1</option>
    <option value="num2">Num2</option>
    <option value="num3">Num3</option>
</select>
<p id="pris">100</p>

</body>
</html>
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
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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
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
04/0409:43 AI google.com Af Peter Olsen i Andre onlineløsninger
31/0310:22 Makro der gemmer vedhæftet fil fra Msg og omdøber filen Af lokesa i Excel
30/0313:45 Kablet forbindelse mellem android telefon og windows 11 pc Af 1Dorte i Android
30/0312:04 Elementtype vises - og ikke billedet? Af hkprofil i Billedbehandling
29/0312:08 Problemer med replay af købte kursusvideoer Af annam i Browsere
White papers
Flere white papers »