CODEWITHSUNDEEP
javascriptjqueryhtml
shell
shell

Reputation: 1937

JQuery menu a href selecting the li

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

Upvotes: 0

Views: 1007

Answers (7)

Kamil Bogumił
Kamil Bogumił

Reputation: 121

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.net/ggfbpeso/3/

Upvotes: 1

Stefan Konno
Stefan Konno

Reputation: 1337

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.net/xqga7h4x/

Upvotes: 2

APAD1
APAD1

Reputation: 13666

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

Upvotes: 2

Luis Cardenas
Luis Cardenas

Reputation: 363

try this

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

Upvotes: 2

GPicazo
GPicazo

Reputation: 6676

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.net/projects/chained . They show an example of how to do exactly that.

Upvotes: 2

omikes
omikes

Reputation: 8513

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

Upvotes: 1

Guy
Guy

Reputation: 11305

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 comments you would be better off having a select for each choice, which you could then trigger on change.

Upvotes: 3

Related Questions