Gå til innhold

Fylle dropdown list utifra valg i en annen


Anbefalte innlegg

Hei.

 

Jeg har en dropdown list med kunder og en under med produkter. Det jeg vil er att den med produkter oppdaterer seg ettersom hva som velges i kunder.

Kunder og produkter ligger i to forskjellige tabeller i databasen.

 

Er dette mulig med javascript, jquery eller noe annet?

 

Takker på forhånd for alle tips.

Endret av Zts
Lenke til kommentar
Videoannonse
Annonse

Takk for tips. Har klart å søke meg fram til ett par tutorials som kan hjelpe meg litt på vei.

Ser ut til å bruke 'onchange' for å kalle en ajax funksjon. Da trenger jeg bare å lage en php fil som henter listen med produkter fra databasen og returnerer de.

 

Poster koden når jeg har laget noe som fungerer.

  • Liker 1
Lenke til kommentar
  • 2 uker senere...

Da har jeg hatt litt tid til å kikke på dette igjen. Har kommet opp med følgende etter en tutorial. Dessverre er det noe som ikke fungerer.

 

index.php

<?php include ('db.php'); ?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Ajax test</title>
    </head>
    <body>
        <script src="jquery-2.0.3.min.js"></script>
            <script type="text/javascript">
            $(document).ready(function()
            {
                $(".machine").change(function()
                {
                    var id=$(this).val();
                    var dataString = 'id='+ id;
                    
                    $.ajax
                    ({
                        type: "GET",
                        url: "fetch_customers.php",
                        data: dataString,
                        cache: false,
                        success: function(html)
                        {
                            $(".customer").html(html);
                        }
                    });
                };
            };
        </script>
        Machine:<br />
        <select name="machine" class="machine">
            <option selected="selected">-- Select machine --</option>
        <?php
            foreach ($DBH->query('SELECT id, name FROM machines') as $machine) {
                echo '<option value=\'' . $machine['id'] . '\'>' . $machine['name'] . '</option>';
            }
        ?>
        </select><br />
        Customer:<br />
        <select name="customer" class="customer">
            <option>-- Select customer --</option>           
        </select>
    </body>
</html>

fetch_customers.php

<?php
    //Connecting to the database
    include ('db.php');
    
    if (!isset($_GET['id'])) {
        //Machine ID not set, abort.
        echo 'Machine ID not set. Aborting';
        exit();
    } else {
        //Checking if machine ID is numeric
        if (is_numeric($_GET['id'])) {
            //Fetching all the customers that belongs to the chosen machine
            $mID        = $_GET['id'];
            foreach ($DBH->query("SELECT * FROM customers WHERE mID = $mID") as $customer) {
                echo '<option>' . $customer[2] . ' - ' . $customer[3] . '</option>';
            }
        } else {
            //Machine ID not a integer, abort.
            echo 'Machine ID must be a number. Aborting';
            exit();
        }
    }
?>

PHP filen fetc_customers.php returnerer kundene som er knyttet til maskinen når den får en ID som stemmer overrens med en oppføring i databasen.

Men det er ingen endring i dropdown til kunder når det velges en maskin. Er det noen som klarer å se hva som er feil?

 

Edit: Har fikset noen skrivefeil i javascript delen.

Endret av Zts
Lenke til kommentar

Du kan jo begynne med å sørge for at du ikke har syntax errors i javascriptet ditt. Du hadde glemt tre semikolon og to parenteser. Koden under skal være uten feil. Jeg byttet også ut datastring variabelen din siden jeg synes metoden brukt under er mer oversiktig.

<script type="text/javascript">
	$(document).ready(function() {
		$(".machine").change(function() {
			var id=$(this).val();                   
			$.ajax({
				type: "GET",
				url: "fetch_customers.php",
				data: {id:id},
				cache: false,
				success: function(html) {
					$(".customer").html(html);
				}
			});
		});
	});
</script>

Edit: Testet scriptene dine hos meg lokalt, bare uten databasetilkobling (hardkodet dropdown alternativene) og det fungerte fint.

Endret av Feh
  • Liker 1
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...