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

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

因为它不是一个常规的dropdown/select元素，所以不会有任何更改事件。

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

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

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

});

这会将单击处理程序附加到任何具有order-drop类的元素中包含order类的每个元素。这可能适合也可能不适合，这取决于页面上的其他内容。适合该选择器的任何其他元素也将成为此代码的目标，因此请注意。