Sweating and screaming because of a cascading drop down

Question

After searching for an answer for about five days for a solution to my problem, I figured I might as well ask for some help. I am working on a cascading drop down that I can´t seem to get to work.

The Mysql data are saved in one table where we have country (varchar) and regions (varchar), names of document (varchar), links to documents (varchar) as well as date added (timestamp).

I want the first dropdown to lead to the second drop down that contains the regions. I looked at many tutorials but I can´t seem to find one that uses either PDO or Mysqli, that works. When the form is submitted I want the name of the document to appear as hyperlink and the date added.

I got started using: http://www.electrictoolbox.com/json-data-jquery-php-mysql/

This is my code:

"Drop down site"

 <form>

    <select name="country" id="countryname">
        <option>Sverige</option>
        <option>Norge</option>
        <option>Danmark</option>
        <option>Finland</option>

    </select>  


    <select name="region" id="regionname">
    </select>


</form>

Javascript (jQuery)

function popregion() {

$.getJSON('/blanketter_func2.php', {countryname:$('#countryname').val()}, function(data) {


    var select = $('#regionname');
    var options = select.prop('options');
    $('option', select).remove();

    $.each(data, function(index, array) {
        options[options.length] = new Option(array['region']);
    });
});
}

$(document).ready(function() {

popregion();
$('#countryname').change(function() {
    popregion();
});
});

The function file (blanketed_func2.php).

<?php
$dsn = "mysql:host=localhost;dbname=blanketter";
$username = "root";
$password = "root";
$pdo = new PDO($dsn, $username, $password);

$rows = array();
if(isset($_GET['countryname'])) {
$stmt = $pdo->prepare("SELECT region FROM blanketter WHERE country = ? ORDER BY         region");
$stmt->execute(array($_GET['countryname']));
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

}
echo json_encode($rows);

?>

I am using jQuery version 1.9.1 and any help would be appreciated!

/Sten

Answer 1

The problem was with the Javascrip. Since of Jquery 1.9 .live have been changed to .on. The right Jquery code is:

var formObject = {
run : function(obj) {
    if (obj.val() === '') {
        obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
    } else {
        var id = obj.attr('id');
        var v = obj.val();
        jQuery.getJSON('func/blankett_func.php', { id : id, value : v }, function(data) {
            if (!data.error) {
                obj.next('.update').html(data.list).removeAttr('disabled');
            } else {
                obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
            }
        });
    }
}
};
$(function() {

$('.update').on('change', function() {
    formObject.run($(this));
});

});