Ajax code in select werkt niet helemaal goed

[Verwijderd]

Hallo,

Ik heb met behulp van het internet een code samengesteld waar ik aan de hand van de keuze in selectbox1 values krijg in selectbox2 die uit een database komen.

Wanneer ik de eerste keer een selectie doe met selectbox1 dan krijg ik mooi alles ingevuld in selectbox2 maar als ik een andere selectie doe in selectbox1 dan blijven die vorige values staan en toont hij de bijbehorende niet...

Nogthans als ik in Firefox mijn web developper tools erbij neem dan zie ik wel dat hij mijn achterliggende php file met de juiste values vult.

Ik ben op vlak van AJAX en JAVASCRIPT en JQUERY nog steeds een leek begrijp het meeste wel door mijn PHP kennis maar weet hier bijvoorbeeld geen oplossing voor. Op internet las ik dat er best gebruikt wordt gemaakt van een onChange maar dat lijkt me ook niet te lukken ik weet ook niet hoe ik daar goed aan begin.

Hier de code tot nu:

JavaScript:

$(document).ready(function(e) {
    $('select.discipline').change(function(e) { // Wanneer de discipline staat is veranderd:
        var sel_value=$(this).val(); // -> Krijg de gekozen Value
        $.ajax(
        {
            type: "POST",
            url: "includes/incl/ajax-articles.php", // Deze php pagina zal de value krijgen via de POST/GET en verwerkt deze
            data: {selected_option: sel_value}, // Verzend de geselecteerde value
            dataType:"HTML",
            success: function(data)
            {
                $('select.article').append(data); // Stuurt de juiste values van de tweede select door naar deze select
            }
        });
    });
});

PHP:

<?php
if(isset($_POST['selected_option']))
    $selected_option = filter_input(INPUT_POST, "selected_option", FILTER_SANITIZE_STRING);
else exit(); // No value is sent

require('conn.inc.php');

    $articleselect = $dbh->prepare("SELECT * FROM artikelen WHERE a_discipline = ?");
    $articleselect->bindParam(1, $selected_option); 
    $articleselect->execute();
    
$options="";    
    while($articlerow = $articleselect->fetch(PDO::FETCH_ASSOC)){
    $options .='<option value="' . $articlerow['a_code'] . '">' . $articlerow['a_code'] . " | " . $articlerow['a_omschr_nl'] .'</option>';
    }
echo $options;

?>

Iemand die mij kan verder helpen?

[Eric Z]

I.p.v. append html gebruiken in je succes functie.
Of voor de append .empty() plaatsen.

[xleeuwx]

Eric Z schreef op zaterdag 31 mei 2014 @ 23:39:
I.p.v. append html gebruiken in je succes functie.
Of voor de append .empty() plaatsen.

Zo dus:

JavaScript:

$('select.article').html(data);

nadeel is dat hij gehele html code overschrijft, wat in jouw geval geen probleem is.

[ Voor 21% gewijzigd door xleeuwx op 02-06-2014 10:08 ]

[Verwijderd]

Thx werkt perfect, intussen ook bijgeleerd dat die append gewoon zaken erbij plaatst en niet overschrijft!

[P.O. Box]

tis net engels he.. die programmeertaal...

[Verwijderd]

Even een beetje dieper gaande op deze vraag, ik zou die dropdown graag searchable maken, ik heb al geprobeerd met "chosen" een soort van kleine framework maar ik krijg dan geen values meer door is er een gemakkelijke manier om dit te integreren?

[Eric Z]

Als ik het goed begrijp heb je chosen dus al wel werkend? Waarschijnlijk word ook je select nog geupdate maar doet chosen daar nog niets mee.
Zie de documentatie op: http://harvesthq.github.io/chosen/options.html , en dan kom je er wel uit verwacht ik.