JSFiddle

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

但是当我点击这些选项时，我的控制台中没有记录任何内容。至少选择汽车选项和选择型号选项应该是记录。我如何解决这个问题，以及如何获得每个子菜单的选项（即Ford，Mustang for selectCar）？

Answer 1

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

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

然而，你所拥有的标记并不是特别适合我认为你想要实现的目标。根据评论中的建议，您最好为每个选项设置select，然后可以在change上触发。

Answer 2

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

Answer 3

＆lt; p＆gt;您的代码出现了一些问题。首先，您会混淆元素，以及它们触发的事件。例如，选择更改事件触发器。＆LT; / p为H. ＆LT;预＆GT;＆LT;代码＆GT;＆LT;选择＆GT; ＆lt; option value =＆＃34; ford＆＃34;＆gt; Ford＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;如果你绝对想要使用ul，使用元素，你可以监听元素上的click事件，然后将属性值更改为data-value。如果您为一个属性添加数据前缀，它将验证为正确的html5，并且您可以使用它执行所需的操作。＆lt; / p＆gt; ＆LT p为H.;＆LT;强＆GT; HTML：其中/强＆GT;＆LT; / p为H. ＆lt; pre＆gt;＆lt; code＆gt;＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;数据值=＆＃34;福特＆＃34;＆GT;福特＆LT; / A＆GT;＆LT; /锂＆GT; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆LT p为H.;＆LT;强＆GT;的javascript：其中/强＆GT;＆LT; / p为H. ＆lt; pre＆gt;＆lt; code＆gt; $（＆＃34; #menu a＆＃34;）。on（＆＃34; click＆＃34;，function（）{ var selected = $（this）.attr（＆＃34; data-value＆＃34;）; 的console.log（选择的）; }）; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt; a元素通常没有值属性。如果你想看一下，我为你做了一个小提琴。＆lt; / p＆gt; ＆lt; p＆gt;＆lt; a href =＆＃34; http：//jsfiddle.net/xqga7h4x/"的rel =＆＃34; nofollow的＆＃34;＆GT; HTTP：//jsfiddle.net/xqga7h4x/< / A＆GT;＆LT; / p为H.

Answer 4

试试这个

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

Answer 5

我会将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

Answer 6

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

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

Answer 7

嗨＆＃34; a＆＃34;为了清晰起见，标记通常不会使用值更改它并使用自定义属性。像这样：

<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>

并使用选择器a，没有它＆＃34;这个＆＃34;将尝试从菜单中获取数据＆＃34; id不是子链接：

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

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

jQuery菜单一个href选择li

7 个答案:

JSFiddle