change menu and div element on multiple dropdown value

Question

I am trying to change menu and div element based on multiple dropdown.

If DD MM and YY is selected, for example 12-January-2000 is selected then menu will change to test 2 and its respective div element. Is it possible to do this with jquery? I have seen a few but only for single dropdown.

var header = document.getElementById("myDIV");
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("button-group");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active1");
    current[0].className = current[0].className.replace(" active1", "");
    this.className += " active1";
  });
}

$(document).ready(function() {
  $("#myTab a").click(function(e) {
    e.preventDefault();
    $(this).tab('show');
  });
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <ul class="nav nav-pills flex-column">
      </ul>
      <hr class="d-sm-none">
    </div>
    <div class="example">
      <select id="date_select" style="color:#002d74">
        <option value="DD">DD</option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>

      <select style="color:#002d74">
        <option>MM</option>
        <option value="Jan">January</option>
        <option value="Feb">February</option>
        <option value="Mar">March</option>
        <option value="Apr">April</option>
        <option value="May">May</option>
        <option value="Jun">June</option>
        <option value="Jul">July</option>
        <option value="Aug">August</option>
        <option value="Sept">September</option>
        <option value="Oct">October</option>
        <option value="Nov">November</option>
        <option value="Dec">December</option>
      </select>

      <select style="color:#002d74">
        <option>YY</option>
        <option value="2010">2010</option>
        <option value="2009">2009</option>
        <option value="2008">2008</option>
        <option value="2007">2007</option>
        <option value="2006">2006</option>
        <option value="2005">2005</option>
        <option value="2004">2004</option>
        <option value="2003">2003</option>
        <option value="2002">2002</option>
        <option value="2001">2001</option>
        <option value="2000">2000</option>
      </select>
    </div>
  </div> <br><br>

  <div id="myDIV">
    <ul id="myTab" class="nav nav-pills">
      <li class="nav-item">
        <a href="#test1" class="button-group active1" value="T1">Test 1</a>
      </li>
      <li class="nav-item">
        <a href="#test2" class="button-group" value="T2">Test 2</a>
      </li>
    </ul><br>
    <div class="tab-content jumbotron">
      <div class="tab-pane fade show active" id="test1">
        <h4 style="color:#002d74;">Content goes here</h4>
        <p>Test1</p>

        <br><br>
      </div>
      <div class="tab-pane fade" id="test2">
        <h4 style="color:#002d74;">Content goes here</h4>
        <p>Test2</p>
        <br><br>
      </div>
    </div>
  </div>
</div>

I posted the code here

Bhautik · Accepted Answer · 2021-04-19 08:45:08Z

Try the below snippet.

    var header = document.getElementById("myDIV");
    var header = document.getElementById("myDIV");
    var btns   = header.getElementsByClassName("button-group");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function() {
            var current = document.getElementsByClassName("active1");
            current[0].className = current[0].className.replace(" active1", "");
            this.className += " active1";
        });
    }

    $(document).ready(function() {
        $("#myTab a").click(function(e) {
            e.preventDefault();
            $(this).tab('show');
        });
      
        $('.day, .month, .year').on('change', function(){
            showTabBasedOnDate();
        });

        function showTabBasedOnDate(){

            var day   = $('.day').val();
            var month = $('.month').val();
            var year  = $('.year').val();

            if(
                day != '' &&
                month != '' &&
                year != '' &&
                day == '12' &&
                month == 'Jan' &&
                year == '2010'
            ){
                $('#myTab a[href="#test2"]').tab('show');
            }else{
                $('#myTab a[href="#test1"]').tab('show');
            }

        }

    });

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <ul class="nav nav-pills flex-column">
      </ul>
      <hr class="d-sm-none">
    </div>
    <div class="example">
      <select id="date_select" class="day" style="color:#002d74">
        <option value="DD">DD</option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>

      <select style="color:#002d74" class="month">
        <option>MM</option>
        <option value="Jan">January</option>
        <option value="Feb">February</option>
        <option value="Mar">March</option>
        <option value="Apr">April</option>
        <option value="May">May</option>
        <option value="Jun">June</option>
        <option value="Jul">July</option>
        <option value="Aug">August</option>
        <option value="Sept">September</option>
        <option value="Oct">October</option>
        <option value="Nov">November</option>
        <option value="Dec">December</option>
      </select>

      <select style="color:#002d74" class="year">
        <option>YY</option>
        <option value="2010">2010</option>
        <option value="2009">2009</option>
        <option value="2008">2008</option>
        <option value="2007">2007</option>
        <option value="2006">2006</option>
        <option value="2005">2005</option>
        <option value="2004">2004</option>
        <option value="2003">2003</option>
        <option value="2002">2002</option>
        <option value="2001">2001</option>
        <option value="2000">2000</option>
      </select>
    </div>
  </div> <br><br>

  <div id="myDIV">
    <ul id="myTab" class="nav nav-pills">
      <li class="nav-item">
        <a href="#test1" class="button-group active1" value="T1">Test 1</a>
      </li>
      <li class="nav-item">
        <a href="#test2" class="button-group" value="T2">Test 2</a>
      </li>
    </ul><br>
    <div class="tab-content jumbotron">
      <div class="tab-pane fade show active" id="test1">
        <h4 style="color:#002d74;">Content goes here</h4>
        <p>Test1</p>

        <br><br>
      </div>
      <div class="tab-pane fade" id="test2">
        <h4 style="color:#002d74;">Content goes here</h4>
        <p>Test2</p>
        <br><br>
      </div>
    </div>
  </div>
</div>

sinisake · Accepted Answer · 2021-04-19 08:45:58Z

1

Here is basic logic, push selected options values into array, and check it:

  $( "select" )
  .change(function() {
    selected=[];
    $( "select option:selected" ).each(function() {
      selected.push($(this).text())
    });
  
  //conditions
 if(selected[0]!='DD' && selected[1]!='MM' && selected[2]!="YY") {
 $('#test1').removeClass('active');
$('#test2').tab('show');
      
 
 }

Of course, you will have to tweak conditions to your needs, but it is possible start.

Demo: https://jsfiddle.net/tbw713du/1/

answered Apr 19, 2021 at 8:45

sinisake

11.3k2 gold badges21 silver badges29 bronze badges

Collectives™ on Stack Overflow

change menu and div element on multiple dropdown value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related