Question

我正在创建一个简单的下拉菜单，只有当用户在我们的网站上使用移动设备时才会显示该菜单。目标是让用户选择一个值并通过AJAX获得此值post。

我已经将这一切都用于使用普通链接（a href's）的非移动设备，但在移动设备上，我似乎无法让它工作。这是我到目前为止所做的。

我的简单下拉菜单

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

我的AJAX脚本

$(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;

    });

});

似乎没有选择任何东西。当我在普通链接上使用此代码时，console.log会显示正确的信息，但不显示下拉菜单。

到目前为止我尝试过的事情：当然，我搜索过谷歌并遇到过一些例子，例如：

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

我也试过这个：

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

如果我使用Bootstrap下拉菜单和我的工作代码，一切正常。但我认为移动设备不会注册click功能。我已经阅读了touch函数或其他内容。但这对我没有用。

我想使用普通下拉列表并显示移动设备默认下拉选项。

喜欢这个iOS：

这个Android：

但是注意到了。我究竟做错了什么？以下是我正常工作链接和AJAX调用的代码（它不适用于Fiddle，但它可以在我的网站上运行）https://jsfiddle.net/dk3mnk8w/。我希望有人知道我做错了什么。

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

你应该改变这个

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

到

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

从下拉列表中选择值时触发AJAX

1 个答案: