Question

我想在页面A上有一个指向页面B的链接，当来自页面A时，该链接将为/pageb.html?product=monster

怪物是我们要选择的选项。这样可以正常工作。

页面上的另一个功能是，当用户从下拉菜单中选择时，它将相应地显示和隐藏div。这样可以正常工作。

我遇到的问题是，当将两者组合在一起时，它无法正常工作。

应该发生什么当页面加载pageb.html时，它应显示所选的默认选项，因此将显示div及其内容。当从另一个页面加载页面pageb.html？product = monster时，应选择该选项并显示该选项。

会发生什么加载页面pageb.html时，它将隐藏所有div，并且未选择默认选项。加载页面pageb.html？product = monster时，会选择下拉菜单，但看不到div。在每种加载方式之后，您都可以从下拉菜单中进行选择，这样就可以将div切入和切出都没有问题。任何见识都受到赞赏。

$(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

您遇到的问题听起来像是因为在代码中设置下拉值时未触发change事件。

如果您使用javascript以编程方式更改选择值，则不会触发更改事件。

从一页链接并选择下拉选项

1 个答案: