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

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 下拉菜单与我的工作代码一起使用，则一切正常。但我认为移动设备没有注册点击功能。我读过有关 touch 功能或其他内容的内容。但这对我不起作用。

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

像这样的 iOS:

还有这个 Android:

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

Answer 1

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