javascript - JQuery 菜单 a href 选择 li

Question

我似乎无法弄清楚这一点，我知道我查过类似的问题，但由于某种原因它们对我没有帮助。我有一个像这样的菜单:

<ul id="menu">
    <li>
        <a href="#" value="selectCar">Select Car</a></li>
            <ul>
                <li><a href="#" value="ford">Ford</a></li>
                <li><a href="#" value="mustang">Mustang</a></li>
           </ul>
    </li>
    <li>
        <a href="#" value="selectModel">Select Model</a>
            <ul>
               <li><a href="#" value="f500">F500</a></li>
               <li><a href="#" value="z2000">Z2000</a></li>
           </ul>
    </li>
</ul>

我从之前的问题中知道可以通过以下方式获取值:

$("#menu").change(function() {
    var selected = $(this).val();
    console.log(selected);
}); 

但是当我单击这些选项时，我的控制台中没有记录任何内容。至少应该记录选择汽车选项和选择型号选项。如何解决此问题以及如何获取每个子菜单的选项(即 selectCar 的福特、野马)？

Answer 1

您需要触发click事件，而不是change。

$("#menu a").click(function() {
    var selected = $(this).val();
    console.log(selected);
}); 

但是，您所拥有的标记并不是特别适合我认为您想要实现的目标。正如评论中所建议的，您最好为每个选择都选择一个 select，然后您可以在 change 时触发它。