admin管理员组

文章数量:1391975

I cannot seem to figure this out, I know there are similar questions which I have looked up but they do not help me for some reason. I have a menu like so:

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

I know from previous questions that getting the value can be done with:

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

but nothing is being logged in my console when I click these options. At least the select car option and select model option should be logging. How do I fix this and also how do I get the options for each sub-menu (i.e Ford, Mustang for selectCar)?

I cannot seem to figure this out, I know there are similar questions which I have looked up but they do not help me for some reason. I have a menu like so:

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

I know from previous questions that getting the value can be done with:

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

but nothing is being logged in my console when I click these options. At least the select car option and select model option should be logging. How do I fix this and also how do I get the options for each sub-menu (i.e Ford, Mustang for selectCar)?

• javascript
• jquery
• html

Share Improve this question Follow edited Jun 30, 2015 at 21:21 shell asked Jun 30, 2015 at 21:19 shellshell 1,93744 gold badges2525 silver badges4343 bronze badges 7

• 4 menu never changes, but it does get clicked... – dandavis Commented Jun 30, 2015 at 21:19
• 2 are you talking about <select><option> ?, they have change event. – divy3993 Commented Jun 30, 2015 at 21:21
• are you wrapping your code in a document ready function jQuery thing? – guergana Commented Jun 30, 2015 at 21:22
• divy3993 is right. you need to use <select><option> – guergana Commented Jun 30, 2015 at 21:23
• 1 <select id="menu"> <option>Ford</option> <option>Mustang</option> </select> – guergana Commented Jun 30, 2015 at 21:24

 |  Show 2 more ments

7 Answers 7

Sorted by: Reset to default 3

You need to trigger on the click event, not change.

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

However, the markup you have is not particularly well suited to what I believe you are trying to achieve. As suggested in the ments you would be better off having a select for each choice, which you could then trigger on change.

Sounds like you are talking about a select/options control, not a ul/li control. If you need to do cascading selects with make/models, I would suggest using the jquery chained plugin: http://www.appelsiini/projects/chained . They show an example of how to do exactly that.

try this

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

I would restructure the HTML as select dropdowns rather than an unordered list of links:

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

And the jQuery would pretty much stay the same for you:

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

JSFiddle

There's a few things wrong with your code. First of all, you're confusing elements, and what events they trigger. Change events trigger on selects for example.

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

If you absoutely do want to use a ul for this, with a elements, you can listen for the click events on the a elements, then change the attribute value to data-value. If you prefix an attribute with data, it will validate as correct html5, and you can do what you want with it.

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

The a element usually doesn't have a value attribute. I made a fiddle for you, if you want to take a look.

http://jsfiddle/xqga7h4x/

Try using click, since its not an input, and .html() because there is no value:

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

Hi "a" marking don't normally use value change it for clarity and use custom attribute. like this:

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

And use selector with a, without it "this" will try to get data from "menu" id not a child link:

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

https://jsfiddle/ggfbpeso/3/

本文标签： javascriptJQuery menu a href selecting the liStack Overflow