时间戳

首页 > 解决方案 > 基于选择调用jQuery的下拉菜单

php - 基于选择调用jQuery的下拉菜单

问题描述

我正在尝试创建一个下拉菜单，该菜单根据下拉菜单中的选择调用一些 jQuery，这会更改表中显示的数据。

我的代码：

选择菜单

<select style="margin-bottom: 8px; width: 14%; float: left;" onChange="eventtime('day');">
<option onSelect="eventtime('1');" value="1">Monday</option>
<option onSelect="eventtime('2');" value="2">Tuesday</option>
<option onSelect="eventtime('3');" value="3">Wednesday</option>
<option onSelect="eventtime('4');" value="4">Thursday</option>
<option onSelect="eventtime('5');" value="5">Friday</option>
<option onSelect="eventtime('6');" value="6">Saturday</option>
<option onSelect="eventtime('7');" value="7">Sunday</option>
</select>

jQuery

function eventtime(day){
     $.ajax({
    type: "POST",
    url: "assets/pages/habshine/events.php",
    data: "day=" +day,
     success: function(msg){
          $("#main").html(msg);
     }
});
}

这是行不通的。有人知道我可能做错了什么吗？

谢谢

标签： phpjqueryhtml-select

解决方案

function eventtime(){
    var day=$('#select_box').children(":selected").val();
    console.log("Day= "+day)
    $.ajax({
    type: "POST",
    url: "assets/pages/habshine/events.php",
    data: "day=" +day,
     success: function(msg){
          $("#main").html(msg);
     }
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select style="margin-bottom: 8px; width: 14%; float: left;" onChange="eventtime();" id="select_box">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select>

如果选择框的值会发生变化，则转到eventtime()函数。此功能首先过滤所选日期对应值并发布到以下网址。

推荐阅读