Onchange jQuery Event for Dropdown












0















I have a dropdown with 3 selectors. I wanted to show the content of each of the selector onchange. Can someone help?



Codeply: https://www.codeply.com/go/M5JCiCq2qo






function myFunction() {

  var x = document.getElementById("filter-extras").value;

  document.getElementById("extra-filter").innerHTML = "You selected: " +

    x;

}

<label class="col-md-12 pl-0">Select Type</label>

<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">

  <option selected="selected" value="fuel">Fuel replacement</option>

  <option value="wifi">Portable WiFi hotspot</option>

  <option value="cleaning">Post-trip cleaning</option>

</select>



<div>Content for Fuel replacement</div>

<div>Content for Portable WiFi hotspot</div>

<div>Content for Post-trip cleaning</div>





I think with jQuery it would be easier to do.






javascript jquery html







share|improve this question





























    0















    I have a dropdown with 3 selectors. I wanted to show the content of each of the selector onchange. Can someone help?



    Codeply: https://www.codeply.com/go/M5JCiCq2qo






    function myFunction() {
    
  var x = document.getElementById("filter-extras").value;
    
  document.getElementById("extra-filter").innerHTML = "You selected: " +
    
    x;
    
}

    <label class="col-md-12 pl-0">Select Type</label>
    
<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">
    
  <option selected="selected" value="fuel">Fuel replacement</option>
    
  <option value="wifi">Portable WiFi hotspot</option>
    
  <option value="cleaning">Post-trip cleaning</option>
    
</select>
    

    
<div>Content for Fuel replacement</div>
    
<div>Content for Portable WiFi hotspot</div>
    
<div>Content for Post-trip cleaning</div>





    I think with jQuery it would be easier to do.






    javascript jquery html







    share|improve this question



























      0












      0








      0








      I have a dropdown with 3 selectors. I wanted to show the content of each of the selector onchange. Can someone help?



      Codeply: https://www.codeply.com/go/M5JCiCq2qo






      function myFunction() {
      
  var x = document.getElementById("filter-extras").value;
      
  document.getElementById("extra-filter").innerHTML = "You selected: " +
      
    x;
      
}

      <label class="col-md-12 pl-0">Select Type</label>
      
<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">
      
  <option selected="selected" value="fuel">Fuel replacement</option>
      
  <option value="wifi">Portable WiFi hotspot</option>
      
  <option value="cleaning">Post-trip cleaning</option>
      
</select>
      

      
<div>Content for Fuel replacement</div>
      
<div>Content for Portable WiFi hotspot</div>
      
<div>Content for Post-trip cleaning</div>





      I think with jQuery it would be easier to do.






      javascript jquery html







      share|improve this question
















      I have a dropdown with 3 selectors. I wanted to show the content of each of the selector onchange. Can someone help?



      Codeply: https://www.codeply.com/go/M5JCiCq2qo






      function myFunction() {
      
  var x = document.getElementById("filter-extras").value;
      
  document.getElementById("extra-filter").innerHTML = "You selected: " +
      
    x;
      
}

      <label class="col-md-12 pl-0">Select Type</label>
      
<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">
      
  <option selected="selected" value="fuel">Fuel replacement</option>
      
  <option value="wifi">Portable WiFi hotspot</option>
      
  <option value="cleaning">Post-trip cleaning</option>
      
</select>
      

      
<div>Content for Fuel replacement</div>
      
<div>Content for Portable WiFi hotspot</div>
      
<div>Content for Post-trip cleaning</div>





      I think with jQuery it would be easier to do.






      function myFunction() {
      
  var x = document.getElementById("filter-extras").value;
      
  document.getElementById("extra-filter").innerHTML = "You selected: " +
      
    x;
      
}

      <label class="col-md-12 pl-0">Select Type</label>
      
<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">
      
  <option selected="selected" value="fuel">Fuel replacement</option>
      
  <option value="wifi">Portable WiFi hotspot</option>
      
  <option value="cleaning">Post-trip cleaning</option>
      
</select>
      

      
<div>Content for Fuel replacement</div>
      
<div>Content for Portable WiFi hotspot</div>
      
<div>Content for Post-trip cleaning</div>





      function myFunction() {
      
  var x = document.getElementById("filter-extras").value;
      
  document.getElementById("extra-filter").innerHTML = "You selected: " +
      
    x;
      
}

      <label class="col-md-12 pl-0">Select Type</label>
      
<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">
      
  <option selected="selected" value="fuel">Fuel replacement</option>
      
  <option value="wifi">Portable WiFi hotspot</option>
      
  <option value="cleaning">Post-trip cleaning</option>
      
</select>
      

      
<div>Content for Fuel replacement</div>
      
<div>Content for Portable WiFi hotspot</div>
      
<div>Content for Post-trip cleaning</div>





      javascript jquery html




      javascript jquery html






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 23 '18 at 18:58









      Smollet777

      1,3591015




      1,3591015










      asked Nov 23 '18 at 17:03









      Ibadullah KhanIbadullah Khan

      466




      466
























          3 Answers
          3






          active

          oldest

          votes


















          1














          I tried to make two versions with identical behavior and default content displayed.
          Here we simply check in forEach loop if id is equal to selected value: 






          document.getElementById('filter-extras').addEventListener('change', myFunction)
          

          
function myFunction() {
          
  var x = document.getElementById('filter-extras').value;
          
  document.querySelectorAll('.content').forEach(function(element) {
          
    if (element.getAttribute('id') === x) {
          
      element.style = 'display:block'
          
    } else {
          
      element.style = 'display:none'
          
    }
          
  });
          
}
          

          
myFunction()

          <label class="col-md-12 pl-0">Select Type</label>
          
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
          
  <option selected="selected" value="fuel">Fuel replacement</option>
          
  <option value="wifi">Portable WiFi hotspot</option>
          
  <option value="cleaning">Post-trip cleaning</option>
          
</select>
          

          
<div class="content" id="fuel">Content for Fuel replacement</div>
          
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
          
<div class="content" id="cleaning">Content for Post-trip cleaning</div>








          $("#filter-extras").on("change", myFunction)
          

          
function myFunction() {
          
  var x = $("#filter-extras").val();
          
  $('.content').each(function() {
          
    if ($(this).attr('id') === x) {
          
      $(this).show()
          
    } else {
          
      $(this).hide()
          
    }
          
  })
          
}
          

          
myFunction()

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          
<label class="col-md-12 pl-0">Select Type</label>
          
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
          
  <option selected="selected" value="fuel">Fuel replacement</option>
          
  <option value="wifi">Portable WiFi hotspot</option>
          
  <option value="cleaning">Post-trip cleaning</option>
          
</select>
          

          
<div id="fuel" class="content">Content for Fuel replacement</div>
          
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
          
<div id="cleaning" class="content">Content for Post-trip cleaning</div>








          share|improve this answer
























          • Worked like a charm! Thank you :)

            – Ibadullah Khan
            Nov 23 '18 at 21:57



















          2














          This can still be done quite easily with plain JS. You just need to add the change event handler to the select, then you can use the value chosen to select the content to show and hide all the others, something like this:






          var content = document.querySelectorAll('.content');
          

          
document.querySelector('#filter-extras').addEventListener('change', function() {
          
  content.forEach(function(el) { el.style.display = 'none'; });
          
  document.querySelector('#' + this.value).style.display = 'block';
          
});

          .content { 
          
  display: none;
          
}

          <label class="col-md-12 pl-0">Select Type</label>
          
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
          
  <option selected="selected" value="fuel">Fuel replacement</option>
          
  <option value="wifi">Portable WiFi hotspot</option>
          
  <option value="cleaning">Post-trip cleaning</option>
          
</select>
          

          
<div class="content" id="fuel">Content for Fuel replacement</div>
          
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
          
<div class="content" id="cleaning">Content for Post-trip cleaning</div>





          If you did want to do it in jQuery, here is the same logic translated:






          var $content = $('.content');
          

          
$('#filter-extras').on('change', function() {
          
  $content.hide();
          
  $('#' + this.value).show();
          
});

          .content { 
          
  display: none;
          
}

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          
<label class="col-md-12 pl-0">Select Type</label>
          
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
          
  <option selected="selected" value="fuel">Fuel replacement</option>
          
  <option value="wifi">Portable WiFi hotspot</option>
          
  <option value="cleaning">Post-trip cleaning</option>
          
</select>
          

          
<div class="content" id="fuel">Content for Fuel replacement</div>
          
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
          
<div class="content" id="cleaning">Content for Post-trip cleaning</div>








          share|improve this answer
























          • The default content is not loading which is of "Fuel replacement" dropdown. Any luck?

            – Ibadullah Khan
            Nov 23 '18 at 17:41



















          0














          I think you already got your answer but if you want to show selected content by default on load then you should add this line to you code



          // so in order to show the content of "Fuel replacement" as it is selected



          $( function({
          
    const contentToShow = $('#filter-extras').val();
          
    $('#' + contentToShow).show();
          

          
   // after this you can add the code here
          
      $('#filter-extras').change(()=>{
          
        // show hide content here
          
      });
          
});





          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450570%2fonchange-jquery-event-for-dropdown%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            3 Answers
            3






            active

            oldest

            votes








            3 Answers
            3






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            I tried to make two versions with identical behavior and default content displayed.
            Here we simply check in forEach loop if id is equal to selected value: 






            document.getElementById('filter-extras').addEventListener('change', myFunction)
            

            
function myFunction() {
            
  var x = document.getElementById('filter-extras').value;
            
  document.querySelectorAll('.content').forEach(function(element) {
            
    if (element.getAttribute('id') === x) {
            
      element.style = 'display:block'
            
    } else {
            
      element.style = 'display:none'
            
    }
            
  });
            
}
            

            
myFunction()

            <label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>








            $("#filter-extras").on("change", myFunction)
            

            
function myFunction() {
            
  var x = $("#filter-extras").val();
            
  $('.content').each(function() {
            
    if ($(this).attr('id') === x) {
            
      $(this).show()
            
    } else {
            
      $(this).hide()
            
    }
            
  })
            
}
            

            
myFunction()

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            
<label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div id="fuel" class="content">Content for Fuel replacement</div>
            
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
            
<div id="cleaning" class="content">Content for Post-trip cleaning</div>








            share|improve this answer
























            • Worked like a charm! Thank you :)

              – Ibadullah Khan
              Nov 23 '18 at 21:57
















            1














            I tried to make two versions with identical behavior and default content displayed.
            Here we simply check in forEach loop if id is equal to selected value: 






            document.getElementById('filter-extras').addEventListener('change', myFunction)
            

            
function myFunction() {
            
  var x = document.getElementById('filter-extras').value;
            
  document.querySelectorAll('.content').forEach(function(element) {
            
    if (element.getAttribute('id') === x) {
            
      element.style = 'display:block'
            
    } else {
            
      element.style = 'display:none'
            
    }
            
  });
            
}
            

            
myFunction()

            <label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>








            $("#filter-extras").on("change", myFunction)
            

            
function myFunction() {
            
  var x = $("#filter-extras").val();
            
  $('.content').each(function() {
            
    if ($(this).attr('id') === x) {
            
      $(this).show()
            
    } else {
            
      $(this).hide()
            
    }
            
  })
            
}
            

            
myFunction()

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            
<label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div id="fuel" class="content">Content for Fuel replacement</div>
            
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
            
<div id="cleaning" class="content">Content for Post-trip cleaning</div>








            share|improve this answer
























            • Worked like a charm! Thank you :)

              – Ibadullah Khan
              Nov 23 '18 at 21:57














            1












            1








            1







            I tried to make two versions with identical behavior and default content displayed.
            Here we simply check in forEach loop if id is equal to selected value: 






            document.getElementById('filter-extras').addEventListener('change', myFunction)
            

            
function myFunction() {
            
  var x = document.getElementById('filter-extras').value;
            
  document.querySelectorAll('.content').forEach(function(element) {
            
    if (element.getAttribute('id') === x) {
            
      element.style = 'display:block'
            
    } else {
            
      element.style = 'display:none'
            
    }
            
  });
            
}
            

            
myFunction()

            <label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>








            $("#filter-extras").on("change", myFunction)
            

            
function myFunction() {
            
  var x = $("#filter-extras").val();
            
  $('.content').each(function() {
            
    if ($(this).attr('id') === x) {
            
      $(this).show()
            
    } else {
            
      $(this).hide()
            
    }
            
  })
            
}
            

            
myFunction()

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            
<label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div id="fuel" class="content">Content for Fuel replacement</div>
            
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
            
<div id="cleaning" class="content">Content for Post-trip cleaning</div>








            share|improve this answer













            I tried to make two versions with identical behavior and default content displayed.
            Here we simply check in forEach loop if id is equal to selected value: 






            document.getElementById('filter-extras').addEventListener('change', myFunction)
            

            
function myFunction() {
            
  var x = document.getElementById('filter-extras').value;
            
  document.querySelectorAll('.content').forEach(function(element) {
            
    if (element.getAttribute('id') === x) {
            
      element.style = 'display:block'
            
    } else {
            
      element.style = 'display:none'
            
    }
            
  });
            
}
            

            
myFunction()

            <label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>








            $("#filter-extras").on("change", myFunction)
            

            
function myFunction() {
            
  var x = $("#filter-extras").val();
            
  $('.content').each(function() {
            
    if ($(this).attr('id') === x) {
            
      $(this).show()
            
    } else {
            
      $(this).hide()
            
    }
            
  })
            
}
            

            
myFunction()

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            
<label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div id="fuel" class="content">Content for Fuel replacement</div>
            
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
            
<div id="cleaning" class="content">Content for Post-trip cleaning</div>








            document.getElementById('filter-extras').addEventListener('change', myFunction)
            

            
function myFunction() {
            
  var x = document.getElementById('filter-extras').value;
            
  document.querySelectorAll('.content').forEach(function(element) {
            
    if (element.getAttribute('id') === x) {
            
      element.style = 'display:block'
            
    } else {
            
      element.style = 'display:none'
            
    }
            
  });
            
}
            

            
myFunction()

            <label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>





            document.getElementById('filter-extras').addEventListener('change', myFunction)
            

            
function myFunction() {
            
  var x = document.getElementById('filter-extras').value;
            
  document.querySelectorAll('.content').forEach(function(element) {
            
    if (element.getAttribute('id') === x) {
            
      element.style = 'display:block'
            
    } else {
            
      element.style = 'display:none'
            
    }
            
  });
            
}
            

            
myFunction()

            <label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>





            $("#filter-extras").on("change", myFunction)
            

            
function myFunction() {
            
  var x = $("#filter-extras").val();
            
  $('.content').each(function() {
            
    if ($(this).attr('id') === x) {
            
      $(this).show()
            
    } else {
            
      $(this).hide()
            
    }
            
  })
            
}
            

            
myFunction()

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            
<label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div id="fuel" class="content">Content for Fuel replacement</div>
            
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
            
<div id="cleaning" class="content">Content for Post-trip cleaning</div>





            $("#filter-extras").on("change", myFunction)
            

            
function myFunction() {
            
  var x = $("#filter-extras").val();
            
  $('.content').each(function() {
            
    if ($(this).attr('id') === x) {
            
      $(this).show()
            
    } else {
            
      $(this).hide()
            
    }
            
  })
            
}
            

            
myFunction()

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            
<label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div id="fuel" class="content">Content for Fuel replacement</div>
            
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
            
<div id="cleaning" class="content">Content for Post-trip cleaning</div>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 23 '18 at 18:19









            Smollet777Smollet777

            1,3591015




            1,3591015













            • Worked like a charm! Thank you :)

              – Ibadullah Khan
              Nov 23 '18 at 21:57



















            • Worked like a charm! Thank you :)

              – Ibadullah Khan
              Nov 23 '18 at 21:57

















            Worked like a charm! Thank you :)

            – Ibadullah Khan
            Nov 23 '18 at 21:57





            Worked like a charm! Thank you :)

            – Ibadullah Khan
            Nov 23 '18 at 21:57













            2














            This can still be done quite easily with plain JS. You just need to add the change event handler to the select, then you can use the value chosen to select the content to show and hide all the others, something like this:






            var content = document.querySelectorAll('.content');
            

            
document.querySelector('#filter-extras').addEventListener('change', function() {
            
  content.forEach(function(el) { el.style.display = 'none'; });
            
  document.querySelector('#' + this.value).style.display = 'block';
            
});

            .content { 
            
  display: none;
            
}

            <label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>





            If you did want to do it in jQuery, here is the same logic translated:






            var $content = $('.content');
            

            
$('#filter-extras').on('change', function() {
            
  $content.hide();
            
  $('#' + this.value).show();
            
});

            .content { 
            
  display: none;
            
}

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            
<label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>








            share|improve this answer
























            • The default content is not loading which is of "Fuel replacement" dropdown. Any luck?

              – Ibadullah Khan
              Nov 23 '18 at 17:41
















            2














            This can still be done quite easily with plain JS. You just need to add the change event handler to the select, then you can use the value chosen to select the content to show and hide all the others, something like this:






            var content = document.querySelectorAll('.content');
            

            
document.querySelector('#filter-extras').addEventListener('change', function() {
            
  content.forEach(function(el) { el.style.display = 'none'; });
            
  document.querySelector('#' + this.value).style.display = 'block';
            
});

            .content { 
            
  display: none;
            
}

            <label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>





            If you did want to do it in jQuery, here is the same logic translated:






            var $content = $('.content');
            

            
$('#filter-extras').on('change', function() {
            
  $content.hide();
            
  $('#' + this.value).show();
            
});

            .content { 
            
  display: none;
            
}

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            
<label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>








            share|improve this answer
























            • The default content is not loading which is of "Fuel replacement" dropdown. Any luck?

              – Ibadullah Khan
              Nov 23 '18 at 17:41














            2












            2








            2







            This can still be done quite easily with plain JS. You just need to add the change event handler to the select, then you can use the value chosen to select the content to show and hide all the others, something like this:






            var content = document.querySelectorAll('.content');
            

            
document.querySelector('#filter-extras').addEventListener('change', function() {
            
  content.forEach(function(el) { el.style.display = 'none'; });
            
  document.querySelector('#' + this.value).style.display = 'block';
            
});

            .content { 
            
  display: none;
            
}

            <label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>





            If you did want to do it in jQuery, here is the same logic translated:






            var $content = $('.content');
            

            
$('#filter-extras').on('change', function() {
            
  $content.hide();
            
  $('#' + this.value).show();
            
});

            .content { 
            
  display: none;
            
}

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            
<label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>








            share|improve this answer













            This can still be done quite easily with plain JS. You just need to add the change event handler to the select, then you can use the value chosen to select the content to show and hide all the others, something like this:






            var content = document.querySelectorAll('.content');
            

            
document.querySelector('#filter-extras').addEventListener('change', function() {
            
  content.forEach(function(el) { el.style.display = 'none'; });
            
  document.querySelector('#' + this.value).style.display = 'block';
            
});

            .content { 
            
  display: none;
            
}

            <label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>





            If you did want to do it in jQuery, here is the same logic translated:






            var $content = $('.content');
            

            
$('#filter-extras').on('change', function() {
            
  $content.hide();
            
  $('#' + this.value).show();
            
});

            .content { 
            
  display: none;
            
}

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            
<label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>








            var content = document.querySelectorAll('.content');
            

            
document.querySelector('#filter-extras').addEventListener('change', function() {
            
  content.forEach(function(el) { el.style.display = 'none'; });
            
  document.querySelector('#' + this.value).style.display = 'block';
            
});

            .content { 
            
  display: none;
            
}

            <label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>





            var content = document.querySelectorAll('.content');
            

            
document.querySelector('#filter-extras').addEventListener('change', function() {
            
  content.forEach(function(el) { el.style.display = 'none'; });
            
  document.querySelector('#' + this.value).style.display = 'block';
            
});

            .content { 
            
  display: none;
            
}

            <label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>





            var $content = $('.content');
            

            
$('#filter-extras').on('change', function() {
            
  $content.hide();
            
  $('#' + this.value).show();
            
});

            .content { 
            
  display: none;
            
}

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            
<label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>





            var $content = $('.content');
            

            
$('#filter-extras').on('change', function() {
            
  $content.hide();
            
  $('#' + this.value).show();
            
});

            .content { 
            
  display: none;
            
}

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            
<label class="col-md-12 pl-0">Select Type</label>
            
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
            
  <option selected="selected" value="fuel">Fuel replacement</option>
            
  <option value="wifi">Portable WiFi hotspot</option>
            
  <option value="cleaning">Post-trip cleaning</option>
            
</select>
            

            
<div class="content" id="fuel">Content for Fuel replacement</div>
            
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
            
<div class="content" id="cleaning">Content for Post-trip cleaning</div>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 23 '18 at 17:18









            Rory McCrossanRory McCrossan

            242k29206245




            242k29206245













            • The default content is not loading which is of "Fuel replacement" dropdown. Any luck?

              – Ibadullah Khan
              Nov 23 '18 at 17:41



















            • The default content is not loading which is of "Fuel replacement" dropdown. Any luck?

              – Ibadullah Khan
              Nov 23 '18 at 17:41

















            The default content is not loading which is of "Fuel replacement" dropdown. Any luck?

            – Ibadullah Khan
            Nov 23 '18 at 17:41





            The default content is not loading which is of "Fuel replacement" dropdown. Any luck?

            – Ibadullah Khan
            Nov 23 '18 at 17:41











            0














            I think you already got your answer but if you want to show selected content by default on load then you should add this line to you code



            // so in order to show the content of "Fuel replacement" as it is selected



            $( function({
            
    const contentToShow = $('#filter-extras').val();
            
    $('#' + contentToShow).show();
            

            
   // after this you can add the code here
            
      $('#filter-extras').change(()=>{
            
        // show hide content here
            
      });
            
});





            share|improve this answer




























              0














              I think you already got your answer but if you want to show selected content by default on load then you should add this line to you code



              // so in order to show the content of "Fuel replacement" as it is selected



              $( function({
              
    const contentToShow = $('#filter-extras').val();
              
    $('#' + contentToShow).show();
              

              
   // after this you can add the code here
              
      $('#filter-extras').change(()=>{
              
        // show hide content here
              
      });
              
});





              share|improve this answer


























                0












                0








                0







                I think you already got your answer but if you want to show selected content by default on load then you should add this line to you code



                // so in order to show the content of "Fuel replacement" as it is selected



                $( function({
                
    const contentToShow = $('#filter-extras').val();
                
    $('#' + contentToShow).show();
                

                
   // after this you can add the code here
                
      $('#filter-extras').change(()=>{
                
        // show hide content here
                
      });
                
});





                share|improve this answer













                I think you already got your answer but if you want to show selected content by default on load then you should add this line to you code



                // so in order to show the content of "Fuel replacement" as it is selected



                $( function({
                
    const contentToShow = $('#filter-extras').val();
                
    $('#' + contentToShow).show();
                

                
   // after this you can add the code here
                
      $('#filter-extras').change(()=>{
                
        // show hide content here
                
      });
                
});






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 23 '18 at 18:19









                AkhileshAkhilesh

                626




                626






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450570%2fonchange-jquery-event-for-dropdown%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    Popular posts from this blog

                    Berounka

                    Image
                    Berounka.mw-parser-output .entete.map{background-image:url("//upload.wikimedia.org/wikipedia/commons/7/7a/Picto_infobox_map.png")} Caractéristiques Longueur 139  km Bassin 8 861  km 2 Bassin collecteur Elbe Débit moyen ? Cours Source Confluence de la Mže et de la Radbuza · Localisation Pilsen · Altitude 305  m · Coordonnées 49° 45′ 13″ N, 13° 23′ 24″ E Confluence Vltava · Localisation Prague · Altitude 187  m · Coordonnées 49° 59′ 43″ N, 14° 24′ 04″ E Géographie Pays traversés   République tchèque modifier   La Berounka est une rivière de la République tchèque. Elle porte le nom de Mže depuis sa source en Allemagne près de la frontière jusqu'à sa confluence avec la Radbuza à Plzeň. Elle continue ensuite sous le nom de Berounka jusqu'à sa confluence avec la Vltava, près de Prague. La rivière est une destination prisée pour les amateurs de canoë, qui appréc
                    Read more

                    Fiat S.p.A.

                    Image
                    Cet article court présente un sujet plus développé dans : Fiat et Fiat Chrysler Automobiles. Fiat S.p.A. Fiat S.p.A. ( Fabbrica Italiana Automobili Torino , acronyme FIAT) est un groupe, notamment connu comme société-mère du constructeur automobile italien, Fiat. Portail des entreprises Portail de Turin Portail de l’automobile This page is only for reference, If you need detailed information, please check here
                    Read more

                    Type 'String' is not a subtype of type 'int' of 'index'

                    Image
                    up vote 0 down vote favorite My App can authenticate successfully when debugging against the Android emulator, but if I try to authenticate using debugging against the physical device (with same OS version), an error message appears after more than one minute waiting: Exception has occurred. _TypeError (type 'String' is not a subtype of type 'int' of 'index') The error message points to the following code: if (responseJson[AuthUtils.authTokenKey] != null) { AuthUtils.insertDetails( userNameController.text, passwordController.text, responseJson); ... } else { ... }; And in the DEBUG CONSOLE I get the following: I/flutter ( 9531): Auth: SocketException: OS Error: Connection timed out, errno = 110, address = example.com, port = 3897
                    Read more