从 URL 参数和显示元素中选择的选项答案

【问题标题】：Selected Option from URL Parameter and Show Element从 URL 参数和显示元素中选择的选项
【发布时间】：2020-02-10 09:59:51
【问题描述】：

当我尝试通过下面的 URL 发送参数时，隐藏的元素不可见。

https://codepen.io/jafaris-mustafa/pen/dyoooVJ?checkSpeed=form-speed-100

如果没有参数，第一个选项不可见。

https://codepen.io/jafaris-mustafa/pen/dyoooVJ

提前谢谢你。

$(function() {
  $(".form-select-wrap>div").hide();  
  $("#select-speed").change(function() {    
    var currentSelection = $('#select-speed :selected').val();    
    var search = $(this).val();    
    $(".form-select-wrap>div").hide()     $('.' + search).show();     
  })


  function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
  }
  var val = getURLParameter('checkSpeed');
  $('#select-speed').val(val); //  assign URL param to select field

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-speed" name="checkSpeed">
  <option>Select Speed</option>
  <option value="form-speed-30">30</option>
  <option value="form-speed-100">100</option>
  <option value="form-speed-300">300</option>
</select>

<section class="form-select-wrap">
  <div class="form-speed-30">30mbps only</div>
  <div class="form-speed-100">100mbps only</div>
  <div class="form-speed-300">300mbps only</div>
</section>

【问题讨论】：

鉴于您问题中的代码和 URL，您的示例运行良好：jsfiddle.net/wjf85tqz。请检查您的控制台是否有错误。另请注意，在线 JS 编辑器使用框架，因此在父窗口中提供 URL 参数将不起作用，因为 JS 框架不会看到它。
只需在$('#select-speed').val(val).change(); 上添加.change() 即可执行ready function 中设置的事件onChange

标签： jquery html parameters element

【解决方案1】：

感谢 Roy Bogado，这个应该可以工作。

$(function(){
		$(".form-select-wrap>div").hide();
    $("#select-speed").change(function(){
        var currentSelection = $('#select-speed :selected').val();
        var search = $(this).val();
        $(".form-select-wrap>div").hide()
        $('.'+search).show();    
    })


function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}
var val = getURLParameter('checkSpeed');
  
  if (val){
    $('#select-speed').val(val).change(); //  assign URL param to select field
}
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-speed" name="checkSpeed">
  <option>Select Speed</option>
  <option value="form-speed-30">30</option>
  <option value="form-speed-100">100</option>
  <option value="form-speed-300">300</option>
</select>

<section class="form-select-wrap">
  <div class="form-speed-30">30mbps only</div>
  <div class="form-speed-100">100mbps only</div>
  <div class="form-speed-300">300mbps only</div>
</section>

【讨论】：