Question

我正在一个项目（后端）上，前端程序员编写了这样的下拉代码

<div class="drop-wrap drop-wrap-s-4 color-4 list-sort order-drop">
    <div class="drop">
        <b>Sort by price</b>
        <a href="#" class="drop-list"><i class="fa fa-angle-down"></i></a>
       <span>
         <a href="#" class="order">Cheapest</a>
         <a href="#" class="order">Most Expensive</a>
       </span>
     </div>
</div>

如何获取所选值？我将在javascript端使用什么事件进行Ajax调用？

我尝试过类似的方法

$(".order-drop").onselect(function () {
        var order= $("a.order").val();
});

还有这个

$(".order-drop").onchange(function () {
        var order= $("a.order").val();
});

Answer 1

由于它不是常规的下拉/选择元素，因此不会发生任何更改事件。

要获取所选项目的文本，请向链接元素添加事件处理程序，如下所示……

$(".order-drop .order").on("click", function() {

    // here you can get the text of the selected item...
    console.log(this.textContent);

});

这会将点击处理程序附加到类order的任何元素内的类order-drop的每个元素。这可能合适也可能不合适，这取决于页面上的其他内容。此代码还将定位适合该选择器的任何其他元素，因此请注意这一点。

这种类型的下拉菜单应该使用什么jquery事件

1 个答案: