Link from one page and select dropdown option

Question

I want to have a link on Page A link to Page B when coming from Page A the link will be /pageb.html?product=monster

monster would be the option that we want to be selected. This works fine as it should.

another feature on the page is when a user selects from the drop down menu it will show and hide divs accordingly. This works fine as it should.

The issue im having is when the 2 are combined it does not function properly.

What should happen when a page is loaded pageb.html it should show the default option selected and therefore will show the div with its content. when a page is loaded pageb.html?product=monster from another page it should choose that option and show that option.

What does happen when a page is loaded pageb.html it hides all divs and no default option is selected. when a page is loaded pageb.html?product=monster the drop-down menu is selected but no divs are visible. after each load style, you can choose from the dropdown menu and it will swap divs in and out no problem. any insight is appreciated.

 $(document).ready(function(){ var selectedProduct = getUrlParameter("product"); $('select').val(selectedProduct); }); function getUrlParameter(sParam){ var sPageURL = window.location.search.substring(1); var sURLVariables = sPageURL.split('&'); for (var i = 0; i < sURLVariables.length; i++) { var sParameterName = sURLVariables[i].split('='); if (sParameterName[0] == sParam) { return sParameterName[1]; } } } $(document).ready(function(){ //hides dropdown content $(".size_chart").hide(); //unhides first option content $("#jellyfish").show(); //listen to dropdown for change $("#size_select").change(function(){ //rehide content on change $('.size_chart').hide(); //unhides current item $('#'+$(this).val()).show(); }); }); 

 .row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Bootstrap docs: https://getbootstrap.com/docs --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="duration form-group"> <label>Colors:</label> <select class="form-control" id="size_select"> <option value="jellyfish">JellyFish</option> <option value="monster">Monster</option> <option value="lollipop">Lollipop</option> <option value="nightowl">NightOwl</option> </select> </div><!-- END .duration --> <div class="row"> <div id="jellyfish" class="size_chart"> jellyfish </div> <div id="monster" class="size_chart"> monster </div> <div id="lollipop" class="size_chart"> lollipop </div> <div id="nightowl" class="size_chart"> nightowl </div> </div> </div> 

Answer 1

The problem you're having sounds like it's because the change event is not firing when you set your drop down value in code.

If you programatically change a select value with javascript, it will not fire change events.