CODEWITHSUNDEEP
javascriptjqueryhtmlcss
renny
renny

Reputation: 600

How to set the value from the drop down as the default value in the box?

I want the set default value of the select to month. Moreover on load select should show month as text instead of Filter. How can it be achieved??? any help would do good.

Below is the snippet of the code I have written so far.

function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
        }
        window.onclick = function(event) {
            if (!event.target.matches('.dropbtn')) {
                var dropdowns = document.getElementsByClassName("dropdown-content");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }
  .dropbtn {
          background-color: #3498DB;
          position: relative;
            margin: 0 20px;
          color: white;
          padding: 3px 10px;
            font-size: 16px;
          border: none;
          cursor: pointer;
        }
    
        .dropbtn:hover, .dropbtn:focus {
          background-color: #2980B9;
        }
    
        .dropdown {
          position: relative;
          display: inline-block;
    
        }
    
        .dropdown-content {
          display: none;
          position: absolute;
          background-color: #f1f1f1;
          min-width: 130px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          z-index: 1;
        }
    
        .dropdown-content a {
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
        }
    
        .dropdown-content a:hover {background-color: #ddd}
          .dropdown:hover .dropdown-content {display: block;}
          .show {display:block;}
 
<div class="dropdown">
                <button onclick="myFunction()" class="dropbtn">Filter </button>
                <div id="myDropdown" class="dropdown-content">
                  <a href="#">Day</a>
                  <a href="#">Week</a>
                  <a href="#">Month</a>
                </div>

Please let me know how i can achieve this

Upvotes: 1

Views: 102

Answers (3)

Jerrin Thomas
Jerrin Thomas

Reputation: 289

HTML5 makes this more easier by using the select tag. The selected option will specify which option has to be selected by default when the page loads.

<select>
    <option value="Day">Day</option>
    <option value="Week">Week</option>
    <option value="Month" selected >Month</option>
<select>

Upvotes: 1

JamesS
JamesS

Reputation: 2300

Instead of that div class you've got. Create a dropdown such as the following.

<select>
    <option value="Day">Day</option>
    <!--etc-->
</select>

To make a default using this you can simply add the following

    <option value="Day" selected="selected">Day</option>

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

Try this. You can apply click event on the links and when clicked the value of filter can be set

$(document).ready(function(){
$(".dropbtn").html($(".default").text())
})
function myFunction() {
   document.getElementById("myDropdown").classList.toggle("show");
    }
    window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }
    $("#myDropdown").children('a').click(function(){
    $('.dropbtn').html($(this).text())
    })
.dropbtn {
      background-color: #3498DB;
      position: relative;
        margin: 0 20px;
      color: white;
      padding: 3px 10px;
        font-size: 16px;
      border: none;
      cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {
      background-color: #2980B9;
    }

    .dropdown {
      position: relative;
      display: inline-block;

    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 130px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {background-color: #ddd}
      .dropdown:hover .dropdown-content {display: block;}
      .show {display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Filter </button>
            <div id="myDropdown" class="dropdown-content">
              <a href="#">Day</a>
              <a href="#">Week</a>
              <a href="#" class="default">Month</a>
            </div>

Upvotes: 2

Related Questions