javascript - jqtransform 表单选择器(onchange)问题!

Question

我正在使用 Jqtransform 脚本设计表单样式。 该表单包括一个选择器，其中包含一些城市，当我单击一个时，它应该使用该城市内的某些位置更新其下方的选择器。

这里是选择器的代码

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

它在默认样式下工作正常，但在应用 JQ 后，它失去了它的功能

我之前在这里问过一个问题LINK

我像 Dormilich 那样写了:

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

但是没有用!

如果有帮助，这里还有函数的代码

<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>

任何帮助的人???????? 谢谢

Answer 1

您可能会遇到 <select> 的情况具有 <option> 的元素标签与值不同的元素。例如，您可能有一个对应于每个城市的唯一 ID:

<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>

只需调用 .text()在 jqTransform 列表中选择的链接会给你标签，但不是 <option> 的值。元素。

要解决这个问题，可以使用父级的索引<li> jqtransform 列表中的元素索引到 <select>表单上的元素:

<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>