I'm making a simple dropdown menu that i'm showing only when a user is using a mobile device on our website. The goal is to have the user select a value and have this value post trough AJAX.

I've got this all working for non mobile devices using normal links (a href's), but on mobile devices I can't seem to get it to work. Here is what I've got so far.

My Simple dropdown menu

<select id="dropdown-mobile" name="Select-item">
    <option>Select something ... </option>
    <option class="class-x" href="#" data-value="item-A" data-name="item-A" value="item-A">item-A</option>
    <option class="class-x" href="#" data-value="item-B" data-name="item-B" value="item-B">item-B</option>
    <option class="class-x" href="#" data-value="item-C" data-name="item-C" value="item-C">item-C</option>
</select>

My AJAX script

$(document).ready(function()  {
    $('option.class-x').click(function(e){
        var datalist = $(this).data('value');
        var dataname = $(this).data('name');
        console.log(datalist,dataname);
        $.ajax({
            type: "POST",
            url: "/loop-change.php",
            data:{datalist:datalist,dataname:dataname},
            success: function(response) {

                        if ($("#content").html() != response) {
                            $('.loadscreen').delay(1000).fadeOut(500);
                        $("#content").fadeIn(3000, function() {
                            $('a').removeClass('clicked');
                        $("#content").html(response);
                            $('a[data-value = '+datalist+']').addClass('clicked');                      
                            $("#content").fadeIn(3000);
                            $('.loadscreen').delay(1000).fadeOut(500);
                    });
                }
            }
        });
        return false;

    });

});

It seems like there is nothing selected. When I use this code on that normal links the console.log shows the correct information, but not the dropdown menu.

What I've tried so far: Of course I've searched google and came across some examples, like:

$('option.class-x').change(function(e){
       // Your event handler
       alert('Selected');
    });

Also I've tried this:

$(document).on('change', 'option.class-x', function(){
    console.log("list item selected");
    // do whatever here
});

If I use the Bootstrap dropdown menu with my working code, it all works fine. But I think the mobile devices don't register the click function. I've read about the touch function or something. But that hasn't worked for me.

I would like to just use the normal dropdown and have the mobile device default dropdown option to show.

Like this iOS:

And this Android:

But noting works. What am I doing wrong? Here is the code from my working normal link and AJAX call (it doesn't work in Fiddle but it works on my site) /. I hope someone here know what I'm doing wrong.

I'm making a simple dropdown menu that i'm showing only when a user is using a mobile device on our website. The goal is to have the user select a value and have this value post trough AJAX.

I've got this all working for non mobile devices using normal links (a href's), but on mobile devices I can't seem to get it to work. Here is what I've got so far.

My Simple dropdown menu

<select id="dropdown-mobile" name="Select-item">
    <option>Select something ... </option>
    <option class="class-x" href="#" data-value="item-A" data-name="item-A" value="item-A">item-A</option>
    <option class="class-x" href="#" data-value="item-B" data-name="item-B" value="item-B">item-B</option>
    <option class="class-x" href="#" data-value="item-C" data-name="item-C" value="item-C">item-C</option>
</select>

My AJAX script

$(document).ready(function()  {
    $('option.class-x').click(function(e){
        var datalist = $(this).data('value');
        var dataname = $(this).data('name');
        console.log(datalist,dataname);
        $.ajax({
            type: "POST",
            url: "/loop-change.php",
            data:{datalist:datalist,dataname:dataname},
            success: function(response) {

                        if ($("#content").html() != response) {
                            $('.loadscreen').delay(1000).fadeOut(500);
                        $("#content").fadeIn(3000, function() {
                            $('a').removeClass('clicked');
                        $("#content").html(response);
                            $('a[data-value = '+datalist+']').addClass('clicked');                      
                            $("#content").fadeIn(3000);
                            $('.loadscreen').delay(1000).fadeOut(500);
                    });
                }
            }
        });
        return false;

    });

});

It seems like there is nothing selected. When I use this code on that normal links the console.log shows the correct information, but not the dropdown menu.

What I've tried so far: Of course I've searched google and came across some examples, like:

$('option.class-x').change(function(e){
       // Your event handler
       alert('Selected');
    });

Also I've tried this:

$(document).on('change', 'option.class-x', function(){
    console.log("list item selected");
    // do whatever here
});

If I use the Bootstrap dropdown menu with my working code, it all works fine. But I think the mobile devices don't register the click function. I've read about the touch function or something. But that hasn't worked for me.

I would like to just use the normal dropdown and have the mobile device default dropdown option to show.

Like this iOS:

And this Android:

But noting works. What am I doing wrong? Here is the code from my working normal link and AJAX call (it doesn't work in Fiddle but it works on my site) https://jsfiddle/dk3mnk8w/. I hope someone here know what I'm doing wrong.

• javascript
• jquery
• html
• ajax

• You need to attach the .change() handler to the <select> element, not its <option>s. You are changing the selection, not the options. – user5734311 Commented Jun 7, 2017 at 13:36
• you should control <select> change instead of <option> – hasan Commented Jun 7, 2017 at 13:40
• you can run code snippet in answer :) – hasan Commented Jun 7, 2017 at 13:41

1 Answer 1

$("#dropdown-mobile").on('change', function(){
    console.log("list item selected");
    var val = $(this).val();    

    console.log(val);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<select id="dropdown-mobile" name="select">
  <option>abc</option>
   <option>abcd</option>
</select>

You should change this

$(document).on('change', 'option.class-x', function(){
    console.log("list item selected");
    // do whatever here
});

into

$("#dropdown-mobile").on('change', function(){
    console.log("list item selected");
    // do whatever here
});