每次访问时如何自行重置下拉? [英] How do I make a drop-down reset itself every time I visit it?

查看:57
本文介绍了每次访问时如何自行重置下拉?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的网络表单应用程序中,我有一个带有六个方框的仪表板,每个方框都有一个单独的下拉菜单,以便用户可以从数据库中选择他们选择的值(菜单项为他们最常访问的页面),以便于访问。下拉工作正常,并适当显示所选的菜单项。



但是我的网页上的所有下拉菜单都存在问题。每当我访问它们时,我都需要每个下拉列表重新显示记录。这是因为一旦我访问它并向下滚动它或者选择一个值或者没有任何选择就离开它,它会记住那个位置。然后,当我访问另一个下拉菜单(或者选择或不选择)并重新访问第一个下拉菜单时,它不显示顶部的值。相反,它显示了我在访问第二个下拉菜单之前离开它的那些值。



我尝试了很多,但找不到解决问题的方法。我希望每个下拉列表都显示其顶部的值,而不是用户离开它的位置,然后再访问同一页面上的另一个下拉列表。我在这里可以看到用于显示下拉菜单项的代码。



我尝试了什么:



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

推荐答案

.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 =='损益表'| | m.Menu_Item_Name =='余额'|| m.Menu_Item_Name =='收入'|| m.Menu_Item_Name =='Ledger')
{
reportsItems.push(m);
}

else
{
otherItems.push(m);
}

});
.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> 会计师< / li>';
AccountantHeader = true;
}
lielm + ='< li data-value ='+ m.Menu_URL +'title ='+ m.Menu_Item_Name.replace('','')。替换('','')+'>'+ m.Menu_Item_Name +'< / li>';
});
.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> 报告< / li>';
ReportHeader = 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>'; });


这篇关于每次访问时如何自行重置下拉?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆