populate select from other select (include jqtransform)

Question

i have this java script:

    $("#judet div.jqTransformSelectWrapper ul li a").click(function(){     
var jud= $("#judetul1").val(); 
$.ajax({
        type: "POST",
        url: "rental/cms/inc/ajax/cities.php",
        data: { 'jud': jud },
        success: function (msg) {

            $("#oras").html(msg);

        },
        error: function (xhr, err) {
            alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
            alert("responseText: " + xhr.responseText);
        }
    });     
    });

and this html:

<div class=" h">
   <span class="block">Orasul</span>
   <div class="select6" id="oras">

   <select name="oras1" id="oras1"   onchange="zone1();sectorul();">

   </select>
  </div>
   <div class="clear"></div>
   </div>
   <div class="clear"></div>

and this php:

public function get_oras($code3) { 
echo "<option selected='selected' value='0'>Alege oras</option>";
        $code='PPLA';
        $code2='PPLA2';
        $sql="SELECT * FROM `locatii` WHERE (`feature_code`=:code OR `feature_code`=:code2) AND `admin1_code`=:code3 ORDER BY `asciiname` ASC";
        $stmt = $this->dbh->prepare($sql);
        $stmt->bindParam(':code', $code, PDO::PARAM_STR, 30);
        $stmt->bindParam(':code2', $code2, PDO::PARAM_STR, 30);
        $stmt->bindParam(':code3', $code3, PDO::PARAM_INT);

        $stmt->execute();
        foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $result) 
        {
             $oras[]="<option value='".$result['geonameid']."'>".$result['asciiname']."</option>";

        }
    return $oras;

}

html for judetul:

<div class=" h">
 <span class="block">Judetul</span>
  <div class="select6" id="judet">
  <?php $judetul=$db->get_judet(); ?>
  <select name="judetul1" id="judetul1"  >
  <option selected="selected">---</option>
  <?php foreach ($judetul as $val=>$k) { ?>
  <option value="<?php echo $val; ?>"><?php echo $k; ?></option>
  <?php } ?>
  </select>
  </div>
  <div class="clear"></div>
  </div>
  <div class="clear"></div>

The problem is: I need to populate oras1 when i change judetul1. When i change the judetul1 option the select oras1 don't get the values from db.

How can I fix it?

Answer 1

I see there two things in your code, that may cause the problem.

First, in your HTML you don't put the recieved values from ajax in "#oras1" but in "#oras":

success: function (msg) {
    $("#oras").html(msg); // use $("#oras1").html(msg);
},

Second, you should change your PHP to something like:

public function get_oras($code3) { 
    $oras .= "<option selected='selected' value='0'>Alege oras</option>"; // make change here
    $code='PPLA';
    $code2='PPLA2';
    $sql="SELECT * FROM `locatii` WHERE (`feature_code`=:code OR `feature_code`=:code2)   AND `admin1_code`=:code3 ORDER BY `asciiname` ASC";
    $stmt = $this->dbh->prepare($sql);
    $stmt->bindParam(':code', $code, PDO::PARAM_STR, 30);
    $stmt->bindParam(':code2', $code2, PDO::PARAM_STR, 30);
    $stmt->bindParam(':code3', $code3, PDO::PARAM_INT);

    $stmt->execute();
    foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $result) 
    {
         $oras .="<option value='".$result['geonameid']."'>".$result['asciiname'].</option>"; // make change here

    }
    return $oras;

}

Before you sent a normal PHP array to JavaScript and that never works. Therefor it takes some "serialization" like JSON.. In your case the simplest solution is just to put everything in a String and return it. The AJAX will be a String that you can simply inject into your HTML. Another solution would be just to echo every part of string.

Answer 2

That is a question i come across when i develop select box before.

Two things might happen here. 1. The onchange event is not triggered in judetul1. If you want to check this, just open a debug to browser and observe in the "network" and see if a request to other page is sent to get the values from db.

Note: onchange is a problem in some version of jqtransform

2.The problem maybe jqtransform only 'beautify' your select input once(probably at the document ready time). When you change option in judetul1 , it update options list in oras1 select box. But since you are not calling jqtransform again to 'beautify' your select input again, the options text are not updated as you want.

There is indeed solution to this if you still need this fixed.