Как автоматически выбрать выпадающий список <select>со значениями, основанными на параметрах URL при загрузке страницы?

Question

В настоящее время я работаю над веб-сайтом, где нажатие «Enroll» в любом событии, отображаемом на странице «Расписания», приведет к странице Enroll, где в раскрывающемся списке <select> будет автоматически выбираться значение на основе размещенных параметров. в конце URL.

Однако мне трудно убедиться, что опция со значением, основанным на этих параметрах, действительно выбрана. После нажатия кнопки «Регистрация» в раскрывающемся списке на странице «Регистрация» не отображается текст, несмотря на наличие параметров в конце URL.

Live URL: brain-train.com.ph / графики . (Выберите что-нибудь в выпадающем меню на этой странице и нажмите любую кнопку «Зарегистрироваться».)

JS:

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
}

var service = $.urlParam('service');
var batch = $.urlParam('batch');
var appendURL = '?service=' + service + '&batch=' + batch;
var selectValue = $('.page-enroll .info').data('value');

if ( service !== undefined && batch !== undefined ) {
    $('.page-enroll select[name="batch"]').val(service + '-' + batch);
}

Answer 1

Поскольку вы имеете дело с <option> s из <select> здесь, вам необходимо присвоить атрибут selected выбранному.

Второе, поскольку вы Имеется дело с <option> s, атрибут называется value вместо val. (Это важно, если вы отправите <form>)

Итак, ваш код будет выглядеть следующим образом:

jQuery('.page-enroll select[name="batch"] option[val="' + service + '-' + batch + '"]').attr("selected", true)

Протестировано на вашем сайте: -)

Некоторые другие небольшие предложения: используя location.search, вы можете просто прочитать часть после ? (и, возможно, сохранить некоторое регулярное выражение, например, разделив на & и =).

Answer 2

1. Вам нужно иметь value в ваших настройках - нет необходимости в атрибутах данных, которые будет сложно получить

2. Если у вас есть значение, это будет работайте и замените $ .urlParam тоже

Если у вас нет значения (что не имеет никакого смысла), вам нужно выбрать опцию attr("val"), но это очень уродливо

const parms = new URLSearchParams("?service=enrichment&batch=QC1"); // this will be location.search
$(function() {
  const value = parms.get("service")+"-"+parms.get("batch");
  $("[name=batch]").val(value); // sets the value attribute! val is the jQuery method
  
  // why you do not need data-attributes on the options:
  
  $("[name=batch]").on("change",function() {
    const [service, batch] = this.value ? this.value.split("-") : ["",""];
    console.log(service,batch);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="batch">
  <option selected="" disabled="">Preferred venue and batch</option>
  <option disabled="">Grade VI Math Enrichment Program</option>
  <option value="enrichment-SR1">Sta. Rosa, Laguna • Batch 1</option>
  <option value="enrichment-QC1">Quezon City • Batch 1</option>
  <option value="enrichment-LB2">Los Baños, Laguna • Batch 2</option>

  <option disabled="">High School Entrance Test Review</option>
  <option value="hset-LB1">Los Baños, Laguna • PSHS + UPRHS Review – LB1</option>
  <option value="hset-SR1">Sta. Rosa, Laguna • PSHS + UPRHS Review – SR1</option>
  <option value="hset-SR2">Sta. Rosa, Laguna • PSHS + UPRHS Review – SR2</option>
</select>