选择选项在chrome和触摸屏设备上都不起作用 - Select option doesnt work in chrome as well as touch screen devices

Select option doesnt work in chrome as well as touch screen devices

我的前端代码:

<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浏览器中触发。

请提供解决方案。提前感谢

使用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
});