JQuery菜单a href选择li

JQuery menu a href selecting the li

本文关键字：选择 li href 菜单 JQuery      更新时间：2023-09-26

我似乎想不通，我知道我查过一些类似的问题，但出于某种原因，它们对我没有帮助。我有这样的菜单：

<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);
});

但当我单击这些选项时，我的控制台中没有任何记录。至少select car选项和select model选项应该是logging。我该如何解决这个问题，以及如何获得每个子菜单的选项（即福特、野马用于selectCar）？

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

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

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

听起来像是在谈论一个select/options控件，而不是ul/li控件。如果您需要使用make/models进行级联选择，我建议使用jquery链式插件：http://www.appelsiini.net/projects/chained。他们展示了一个如何做到这一点的例子。

尝试这个

$("#menu a").click(function() {
    var value = $(this).attr('value');
    console.log(value);
});

我会将HTML重组为选择下拉列表，而不是无序的链接列表：

<select id="selectCar">
    <option value="ford">Ford</option>
    <option value="mustang">Mustang</option>
</select>
<select id="selectModel">
    <option value="F500">F500</option>
    <option value="z2000">Z2000</option>
</select>

jQuery对您来说几乎保持不变：

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

JSFiddle

您的代码有一些错误。首先，你混淆了元素，以及它们触发了什么事件。例如，在选择时更改事件触发器。

<select>
   <option value="ford">Ford</option>
</select>

如果你确实想使用ul来实现这一点，那么对于a元素，你可以监听a元素上的点击事件，然后将属性值更改为数据值。如果你用数据作为属性的前缀，它将被验证为正确的html5，你可以用它做你想做的事。

html:

<li><a href="#" data-value="ford">Ford</a></li>

javascript:

$("#menu a").on("click", function() {
    var selected = $(this).attr("data-value");
    console.log(selected);
});

a元素通常没有value属性。如果你想看一看的话，我给你做了一把小提琴。

http://jsfiddle.net/xqga7h4x/

尝试使用click，因为它不是一个输入，而使用.html（），因为没有值：

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

Hi"a"标记通常不使用值。为了清晰起见，请更改它并使用自定义属性。像这样：

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

并使用选择器与一个，没有它"这"将尝试从"菜单"id而不是子链接获取数据：

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

https://jsfiddle.net/ggfbpeso/3/

相关文章：