从下拉列表中选择值时触发AJAX [英] Fire AJAX when value selected from dropdown
问题描述
我正在制作一个简单的下拉菜单，仅当用户使用我们网站上的移动设备时才显示.目的是让用户选择一个值，并通过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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
