logo
down
shadow

Bootstrap Dropdown with MVC - Keep last selected value displayed


Bootstrap Dropdown with MVC - Keep last selected value displayed

By : Nicholas Claudio
Date : October 16 2020, 03:08 PM
I wish this help you You can use localStorage for storing. If you want to store in a per page session basis, then you can use sessionStorage.
Something like this should do.. Don't forget to clear the localStorage by calling localStorage.clear(); when needed.
code :
$(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    $("#statusButton").html(selText + '<span class="caret"></span>');
    localStorage['selText'] = selText; // store in storage
|);

$(document).ready(function() {
    var selText = localStorage['selText'] || 'defaultValue';

    if(selText != 'defaultValue') {
        $("#statusButton").html(selText + '<span class="caret"></span>'); // Load previously selected item
    }
});


Share : facebook icon twitter icon
How to get Selected element in bootstrap dropdown, where dropdown is dynamically populated

How to get Selected element in bootstrap dropdown, where dropdown is dynamically populated


By : Matt Bettiol
Date : March 29 2020, 07:55 AM
like below fixes the issue This is similar to How to Display Selected Item in Bootstrap Button Dropdown Title
code :
$(document).on('click', '.dropdown-menu li a', function () {
    console.log("Selected Option:"+$(this).text());
});
  $(staticElement).on(event, dynamicElement, function(){ //etc });
Bootstrap Dropdown button-> post selected dropdown value onclick + Update dropdown with selected value

Bootstrap Dropdown button-> post selected dropdown value onclick + Update dropdown with selected value


By : Apparatus Solutions
Date : March 29 2020, 07:55 AM
I hope this helps you . Update :I dynamically populated dropdown in the separate function then called the click method which is updating title, You can put that in your ajax method and update your title.
this can be achieved by doing the following:
code :
<ul class="nav navbar-top-links navbar-right">
<li>
<div class="btn-group">
<button data-toggle="dropdown" class="btn-xs btn-info dropdown-toggle" id="id_granularity_dropdown"><span id="sampVal">Auto Sampling</span> <span class="caret"></span></button>
    <ul class="dropdown-menu" id="list">
    </ul>
</div>
</li>
        $(document).ready(function(){
		populateLi();
})

$(function() {
  $(".dropdown-menu").on("click","li a",function(){
      a = $(this).closest("a");
      var getSampling = a.text();
      $(this).closest(".dropdown-menu").prev().find(".sampVal").text(getSampling);

});


});

function populateLi()
{

    $("#id_granularity_dropdown2").find(".dropdown-menu").empty();
    insertLi('list2',"#",'1115 min Sampling');
    insertLi('list2',"#",'3000 min Sampling');
    insertLi('list2',"#",'no Hourly min Sampling');
    insertLi('list2',"#",'no Daily min Sampling');
    $("#id_granularity_dropdown").find(".dropdown-menu").empty();
    insertLi('list',"#",'5 min Sampling');
    insertLi('list',"#",'30 min Sampling');
    insertLi('list',"#",'Hourly min Sampling');
    insertLi('list',"#",'Daily min Sampling');
        

        
}

function insertLi (ID,HREF,VALUE) {
    ul = document.getElementById(ID); 
    a= document.createElement("a");
    a.appendChild(document.createTextNode(VALUE));
    a.setAttribute("href", HREF);
    li =  document.createElement("li");
    li.appendChild(a);
    ul.appendChild(li);
}
.nav li {display:inline-block;margin-right:10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-top-links navbar-right">
<li>
    <div class="btn-group">
    <button data-toggle="dropdown" class="btn-xs btn-info dropdown-toggle" id="id_granularity_dropdown"><span id="sampVal" class="sampVal">Auto Sampling</span> <span class="caret"></span></button>
        <ul class="dropdown-menu" id="list">
            
        </ul>
    </div>
</li>
<li>
    <div class="btn-group">
    <button data-toggle="dropdown" class="btn-xs btn-info dropdown-toggle" id="id_granularity_dropdown2"><span id="sampVal2" class="sampVal">No Auto Sampling</span> <span class="caret"></span></button>
        <ul class="dropdown-menu" id="list2">
            
        </ul>
    </div>
</li>

</ul>
How to make Bootstrap dropdown NOT hide on clicking react components displayed within dropdown?

How to make Bootstrap dropdown NOT hide on clicking react components displayed within dropdown?


By : houlai
Date : March 29 2020, 07:55 AM
hope this fix your issue I found that open class is added on the dropdown div (id=dropDownOpen) when the dropdown button is clicked. Thus I used a hack of adding class open to the div when li item (i.e. my react component) is clicked.
This is my onClick function triggered when any li item is clicked :
code :
const keepDropDownOpen = () => {
  window.$('#dropDownOpen').addClass('open');
}
custom dropdown only displayed selected value Angular

custom dropdown only displayed selected value Angular


By : user3226195
Date : March 29 2020, 07:55 AM
wish of those help You have filtered and modified this.myData.cards to have only one item:
code :
 selectDropdownCard(card) {
     this.myData.cards= [card];
  }
<ng-container *ngIf="show1">
    {{selectedCard.cardNumberMasked}} dropdown
</ng-container>
FLask-python: Dropdown selected value is not displayed when selected from dropdown?

FLask-python: Dropdown selected value is not displayed when selected from dropdown?


By : user3721274
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , In test.html has a id testTime and jinja2 template time (which is returned from test.py - render_template) , You have to add selected attribute.
code :
<div>
    <select class="test-default" id="testTime">
    <option value=0 {% if time == 0 %} selected="selected" {% endif %}>today</option>
    <option value=7 {% if time == 7 %} selected="selected" {% endif %}>week</option>
    <option value=14 {% if time == 14 %} selected="selected" {% endif %}>fortnight</option>
    <option value=30 {% if time == 30 %} selected="selected" {% endif %}>month</option>
    </select>
</div>
Related Posts Related Posts :
  • Click event cannot be fired on buttons created dynamically in VB.Net ASP.Net
  • TypeError: Cannot read property of Selector-Matcher
  • I am not able to find master page when i am trying to create one
  • ASP.NET Web API site virtual directory is accessible, but controller actions return HTTP 503
  • Trouble Returning XML to 2D Array not Looping to next Element
  • How can I disable my global.asax Application_Error sub when running on localhost?
  • Run app and launch browser from command line
  • Write output from Gulp task into .Masterpage/.aspx page
  • Object giving null error
  • Not able to create "Asp.Net Core Web application" in Visual Studio 2017
  • Bootstrap datetimepicker - set date time server side
  • ASP.NET Session Management DeleteExpiredSessions Looks silly?
  • Asp.Net MVC Authentication Cookie Conflict
  • how to retrieve facebook user info ASP.NET WEB API 2
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com