jqtransform form selector (onchange) problem !

Question

I'm styling a form with Jqtransform script. The form includes a selector which enlist some cities, when i click a one, it should update the selector below it with some locations within that city.

here is the code of the selector

<select name="city" id="city" class="wide" onchange="populateDestrict(this)"> 

It was working fine with default style , but after applying JQ, it lost it's functionality

I asked a question before here LINK

and i did as Dormilich did by writing:

     $(function() { 
$("form.jqtransform").jqTransform();
$("#city").change(populateDestrict(this)); 
}); 

But it didn't work !

here is also the code of the function if it helps

<script language="javascript">
    function populateDestrict(obj){
        var city=obj.value;
            if(city!=""){
                $.post('city_state.php',{ city: city},function(xml){ 
                    $("#state").removeOption(/./);
                    $("district",xml).each(function() {
                    $("#state").addOption($("key",this).text(), $("value",this).text());
                });
            });
            }
    }
</script>

Any help people ???????? Thanks

Answer 1

You might have a situation where you have a <select> element that has <option> elements where the label differs from the value. For example, you might have a unique ID that corresponds to each city:

<form id="formTransform">   
   <div id="boxRelated">
      <select name="city">
         <option value="21">Gotham</option>
         <option value="12">New York City</option>
         <option value="34">Smallville</option>
      </select>
      <div class="clear"></div>   
   </div> 
</form>

Simply calling .text() on the selected link in the jqTransform list will give you the label, but not the value of the <option> element.

To solve this, you can use the index of the parent <li> element in the jqtransform list to index into the <select> element on the form:

<script> 

   $("#formTransform").jqTransform();

   $("#boxRelated div.jqTransformSelectWrapper ul li a").click(function(){
      var value = $(this).parent().index();
      $("[name=city]").attr('selectedIndex', value);

      // will alert 21, 12, or 34 depending on which one was selected
      alert($("[name=city]").val()); 
      return false; 
   }); 

</script>

Answer 2

How to select the display is none, the event will not occur even. So what you have to do is work on the click event of read that creates jqtransform

<form id="formTransform">   
   <div id="boxRelated">
        <select name="select-country">
            <option>Gotham</option>
            <option>New York City</option>
            <option>Smallville</option>
        </select>
     <div class="clear"></div>   
  </div> 
</form>

<script> 

$("#formTransform").jqTransform();

$("#boxRelated div.jqTransformSelectWrapper ul li a").click(function(){
    var value= $("#boxRelated div.jqTransformSelectWrapper span").text()
    alert("Value Selected = "+value);
    return false; //prevent default browser action 
}); 
</script>