Выбранный параметр из параметра URL и элемента Показать - PullRequest
0 голосов
/ 10 февраля 2020

Когда я пытаюсь отправить параметр через 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>

1 Ответ

0 голосов
/ 11 февраля 2020

Это должно сработать, спасибо Рою Богадо.

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