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

问题描述：

我正在制作一个简单的下拉菜单，仅当用户使用我们网站上的移动设备时才显示.目的是让用户选择一个值，并通过AJAX使该值post.

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.

对于使用普通链接(a href's)的非移动设备，我都可以正常使用，但是在移动设备上，我似乎无法正常运行.这是我到目前为止所得到的.

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.

我的简单下拉菜单

<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显示正确的信息，但不显示下拉菜单.

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.

到目前为止我尝试过的是: 当然，我已经搜索过google并遇到了一些示例，例如:

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

我也尝试过这个:

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

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

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.

喜欢这个iOS:

这个Android:

但是注意有效.我究竟做错了什么?这是我正常工作的链接和AJAX调用中的代码(在Fiddle中不起作用，但在我的网站上有效) https://jsfiddle.net/dk3mnk8w/.我希望这里的人知道我在做什么错.

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.net/dk3mnk8w/. I hope someone here know what I'm doing wrong.

答

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

    console.log(val);
});

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

您应该更改

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

相关推荐