Bootstrap Scroll able Menu and selection of data value and text

        
<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>





<style>

  .scrollable-menu {

      height: auto;

      max-height: 200px;

      overflow-x: hidden;

  }

</style

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-lg-12">

            <h2 class="bold">Scrollable Menu</h2>

            <div class="btn-group">

                <div class="dropdown">

  <button  style="max-width: 300px;width: 200px;"class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

    Dropdown

    <span class="caret"></span>

  </button>

  <ul class="dropdown-menu scrollable-menu" aria-labelledby="dropdownMenu1">

    <li><a href="#" data-value="Nagaraju">Action</a></li>

    <li><a href="#" data-value="another action">Another action</a></li>

    <li><a href="#" data-value="something else here">Something else here</a></li>

    <li><a href="#" data-value="separated link">Separated link</a></li>

 <li><a href="#" data-value="action">Action</a></li>

    <li><a href="#" data-value="another action">Another action</a></li>

    <li><a href="#" data-value="something else here">Something else here</a></li>

    <li><a href="#" data-value="separated link">Separated link</a></li>

 <li><a href="#" data-value="action">Action</a></li>

    <li><a href="#" data-value="another action">Another action</a></li>

    <li><a href="#" data-value="something else here">Something else here</a></li>

    <li><a href="#" data-value="separated link">Separated link</a></li>

  </ul>

</div>

            </div>

         

   

        </div>

    </div>

</div>

</body>

<script>

  $(function() {

  $(".dropdown-menu li a").click(function(){

    $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');

    console.log($(this).attr('data-value'));

    $(this).parents(".dropdown").find('.btn').val($(this).data('value'));

  });

  })

</script>

</html>

JQuery Hide/Show -while refreshing the page showing the hidden division

Problem : 

        we have given two divs  -
                                  <div id="dashboard">
Dashboard </div> <div id="setting"> Setting </div>

        From these two divisions ... I have hidden the setting division by using the following .

                              $("#setting").hide();

       When I fresh the F5 button or refresh the page, the  setting division is showing for some seconds and disappearing.

Solution : 

I have tried many but nothing works.
So I have given written the following.


<div id="dashboard"> Dashboard </div> <div id="setting" style="display:none;"> Setting </div>
                               
After writing the style to setting div , then code is working properly.