选择选项不工作，以及触摸屏设备

Question

我的前端代码：

<div class="form-group col-md-3"> 
    <label for="taluka">Select Taluka</label> 
    <select name="taluka" id="taluka" required class="form-control"> 
     <option value="" selected disabled>Select Taluka</option> 
     <?php $Adder->listTalukas(); ?> 
    </select> 
</div> 
    <div class="form-group col-md-3"> 
    <label for="city">Select City</label> 
    <select name="city" id="city" required class="form-control"> 
     <option value="" selected disabled>Select City</option> 
    </select> 
</div> 
<div class="form-group col-md-3"> 
    <label for="pincode">Select pincode</label> 
    <select name="pincode" id="pincode" required class="form-control"> 
     <option value="" selected disabled>Select pincode</option> 
    </select> 
</div> 

这是我的jQuery代码：

$(document).ready(function() 
    { 
    $("body").on("click", "select#taluka option",function() 
     { 
      var taluka_id = $("#taluka").val(); 

      if(taluka_id != "") 
       { 
        $.ajax({ 
          url: 'get_data.php?id=getCity', 
          type: 'POST', 
          dataType: 'html', 
          data: {taluka_id : taluka_id}, 
         }) 
         .done(function(resp) 
          { 
           $("#city").html("<option value='' selected disabled>Select City</option>"); 
           $("#pincode").html("<option value='' selected disabled>Select Pincode</option>"); 
           $("#city").append(resp); 
          }) 
         .fail(function() 
          { 
           console.log("error"); 
          }); 
       } 
     }); 

    $("body").on("click", "select#city option",function() 
     { 
      var city_id = $("#city").val(); 

      if(city_id != "") 
       { 
        $.ajax({ 
          url: 'get_data.php?id=getPincode', 
          type: 'POST', 
          dataType: 'html', 
          data: {city_id : city_id}, 
         }) 
         .done(function(resp) 
          { 
           $("#pincode").html("<option value='' selected disabled>Select Pincode</option>"); 
           $("#pincode").append(resp); 
          }) 
         .fail(function() 
          { 
           console.log("error"); 
          }); 
       } 
     }); 
}); 

我正通过JQuery的调用get_data.php文件：？

<?php 
    if(extract($_POST) > 0) 
     { 
      $id = $_GET['id']; 

      include("config.php"); include("classes.php"); 

      switch($id) 
       { 
        case 'getCity': 
        echo $Adder->listCities($_POST['taluka_id']); 
        break; 

        case 'getPincode': 
        echo $Adder->listPincodes($_POST['city_id']); 
        break; 

        default: 
        // echo "None"; 
        break; 
       } 
     } 

>

代码工作正常，它发送POST请求以及获得响应还有问题是，点击事件只能在Mozilla Firefox浏览器中触发。它不适用于Chrome以及移动触摸屏浏览器，为什么呢？

请提供解决方案。在此先感谢

Answer 1

使用on('change',"#selector_of_select",function(){})用于检测变化值

$("body").on("change", "select#taluka",function(){ 
// your code remain same 
}); 


$("body").on("change", "select#city",function(){ 
// your code remain same 
});