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

＆GT;

代码工作正常它发送POST请求以及获得响应也问题是click事件仅在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
});

选择选项在Chrome和触摸屏设备中都不起作用

1 个答案: