How do I make a drop-down reset itself every time I visit it?

See more:

ASP.NET

jQuery

drop-down

On my web form application, I am having a dashboard with six boxes each with a separate drop-down so that users can chose values (Menu-items forpages they visit most frequently) of their choice from database for their ease of accessibility. The drop-down is working fine and show the selected menu items appropriately.

But their is a problem with all of the drop-downs on my web page. I need every of the drop-down to show records afresh every time I visit them. This is because once I visit one and scroll down on it either choose a value or left it without any selection, it remember that position. Then when I visit another drop-down (either making a selection on it or not) and revisit the first one, it do not show me values from top. Instead, it show me those values where I left it before visiting the 2nd drop-down.

I tried a lot and can't find any solution to my problem. I want each and every drop-down to show values from its top and not where user left it before visiting another drop-down on the same page. The code I have used for showing menu-items in the drop-downs are available here.

What I have tried:

//

This is the HTML that I've used for every single box that have it's own drop-down.

<div class="row">
                        <div class="box" id="box0">
                            <div class="drop">
                                <div class="edit"><span></span></div>     
                                <div class="dropdownContain">
                                    <div class="dropOut">
                                        <div class="triangle"></div>
                                        <ul class="widget-options">                                 
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <a class="menu-href" href="javascript:">
                                <input type="hidden" class="menu-id" />
                                <span class="menu-icon fa fa-2x"> </span>
                                <div class="clearfx"></div>
                                <label class="menu-text"> </label>
                            </a>
                        </div>

JQuery code for taking the menu-items from database and passing them to the drop-downs.

//
//Menu items are taken from database

if (obj.data.length > 0) {
var lielm = '';

var AccountantHeader = false;
var ReportHeader = false;
var OtherHeader = false;

var accountantItems = [];
var reportsItems = [];
var otherItems = [];

$.each(obj.data, function (i, m) {

if (m.Menu_Item_Name == 'Report Financial' || m.Menu_Item_Name == 'Cover Sheet' || m.Menu_Item_Name == 'Letters' || m.Menu_Item_Name == 'Invites')
{
   accountantsItems.push(m);
}

else if (m.Menu_Item_Name == 'Income Statement' || m.Menu_Item_Name == 'Balance' || m.Menu_Item_Name == 'Income' || m.Menu_Item_Name == 'Ledger')
 {
    reportsItems.push(m);
 }

else
{
   otherItems.push(m);
}

});

  $.each(accountantItems, function (index, m) {
      if (!AccountantHeader) {
         lielm += '<li class="no-hover">Accountants</li>';
         AccountantHeader = true;
    }
    lielm += '<li data-value="' + m.Menu_URL + '" title="' + m.Menu_Item_Name.replace('', '').replace('', '') + '">' + m.Menu_Item_Name + '</li>';
 });

$.each(reportsItems, function (index, m) {
    if (!ReportHeader) {
        lielm += '<li class="no-hover">Reports</li>';
        ReportHeader = true;
      }
    lielm += '<li data-value="' + m.Menu_URL + '" title="' + m.Menu_Item_Name.replace('', '').replace('', '') + '">' + m.Menu_Item_Name + '</li>';
  });

$.each(otherItems, function (index, m) {
       if (!OtherHeader) {
          lielm += '<li class="no-hover">Other</li>';
          OtherHeader = true;
        }
       lielm += '<li data-value="' + m.Menu_URL + '" title="' + m.Menu_Item_Name.replace('', '').replace('', '') + '">' + m.Menu_Item_Name + '</li>';
     });


$(edt).next('.dropdownContain').children('.dropOut').children('.widget-options').html(lielm);
$(edt).next('.dropdownContain').children('.dropOut').children('.widget-options').children('li').click(function () {
var pId = $(edt).parent().parent().attr('id');

var mId = $('#' + pId + ' .menu-id').val() || 0;
var mnu = { UserId: uId, Name: this.outerText, Url: $(this).data('value'), ID: mId }

//
//
// Update dashboard