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

Question

My FrontEnd Code:

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

This is my JQuery code:

$(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");
                            });
                }   
        });
});

The get_data.php file that i am calling through JQuery:

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

?>

The code is working fine it is sending the POST request as well as getting the response also the problem is that the click event is only triggered in mozilla firefox browsers. It doesn't work in chrome as well as mobile touchscreen browsers why so ?

Please provide a solution. Thanks in advance

http://stackoverflow.com/questions/7080213/jquery-click-event-not-working-on-option-element and http://stackoverflow.com/questions/1402227/click-event-on-select-option-element-in-chrome — adeneo, Sep 21 '16 at 14:07
@adeneo that worked for me perfectly man :D the change event on the — Akshay Shrivastav, Sep 21 '16 at 17:02

score 0 · Answer 1 · answered Sep 21 '16 at 14:06

0

Use on('change',"#selector_of_select",function(){}) for detect change value

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


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

answered Sep 21 '16 at 14:06

Haresh Vidja

8,340
3
25
42

it Isn't working now it is not even sending the POST Request – Akshay Shrivastav Sep 21 '16 at 14:08

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

1 Answers1