通过jQuery中的列表项值选择的预填充列表项

Question

I'm new to JQuery. In my App I have the following:

My HTML code is here..

<ul id="list">
    <li>
        <a class="selected" value="0" href="#"  id="sel">ALL</a>
    </li>
    <li>
        <a href="#"  value="1">1+</a>
    </li>
    <li>
        <a href="#" value="2">2+</a>
    </li>
    <li>
        <a href="#" value="3">3+</a>
    </li>
    <li>
        <a href="#" value="4">4+</a>
    </li>
    <li>
        <a href="#" value="5">5+</a>
    </li>
</ul>

<input type="hidden" id="hdn_list" value=""></input>

My CSS code is here..

.selected{background-color:green;}

My JQuery code for getting the selected list value is here..

$(document).ready(function () {
    $('#list li a').click(function () {
        var new = $(this).attr("value");
        $("#hdn_list").value = new;          //passing the new selected values to hidden control
        $('#list li a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    });
});

When i am clicking the submit button it is redirected to next page.. if i back to this page again it must pre fill the selected value using that hidden control(#hdn_list) value and the css style also must apply that selected value.. how to do this through jquery/javascript? thanks in advance.

Answer 1

Use event.preventDefault() in jquery. it's stop the default action

$(document).ready(function () {
    $('#list li a').click(function (event) {
      event.preventDefault();
        var new = $(this).attr("value");
        $("#hdn_list").value = new;          //passing the new selected values to hidden control
        $('#list li a').removeClass('selected');
        $(this).addClass('selected');

    });
});

Answer 2

Try this

 $(document).ready(function () {
    $('#list li a').click(function (e) {
        var nvalue = $(this).attr("value");
        localStorage.setItem("menu", nvalue);
        $("#hdn_list").val(nvalue); //passing the new selected values to hidden control
        $('#list li a').removeClass('selected');
        $(this).addClass('selected');
        e.preventDefault();
    });
      var retrievedObject = localStorage.getItem('menu');
      if (retrievedObject != null) {
        $('ul li a').removeClass("selected")
        $('ul li a[value="' + retrievedObject +'"]').addClass('selected');
      } else {
        $('ul li a:eq(0)').addClass('selected');
      }
});

DEMO