Измените значения опции select 2, если select 1 имеет значение с jquery

Question

Мне требуется немного jQuery для выполнения следующих действий:

В настоящее время пользователь может выбрать программу и / или регион.

Если пользователь выбирает Программу И Регион, мне нужно, чтобы значения параметров раскрывающегося списка регионов изменились на «? Region = 1» и «? Region = 2»

<select class="program" id="program">
            <option value="program1.html">Program 1</option>
            <option value="program2.html">Program 2</option>
</select>

<select class="region" id="region">
            <option value="region1.html">Region 1</option>
            <option value="region2.html">Region2</option>
</select>

Очень ценю помощь.

Моя попытка JQuery:

$('#program').on('change', function () { if($(this).val() !="0") { } else { // no option is selected } })

Answer 1

Вам необходимо дополнительно расширить событие change для #program и включить аналогичное событие для #region.

var programSelected = null;
var regionSelected = null;

$('#program').on('change', function(element) {
			programSelected = $('#program option:selected').text();
      
      updateRegionOptions();
});

$('#region').on('change', function(element) {
      regionSelected = $('#region option:selected').text();
      updateRegionOptions();
});

function updateRegionOptions() {
	if(programSelected != null && regionSelected != null) {
  		$('#region option').each(function() {
      	var modifiedString = '?';        	
         modifiedString += $(this).val().replace(/\d+/,'');
         modifiedString = modifiedString.replace('.html','');	
         modifiedString += '=';
         modifiedString += $(this).val().match(/\d+/);
      	$(this).val(modifiedString);
      });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="program" id="program">
  <option value="" selected disabled>Select Program</option>
  <option value="program1.html">Program 1</option>
  <option value="program2.html">Program 2</option>
</select>

<select class="region" id="region">
<option value="" selected disabled>Select Region</option>
  <option value="region1.html">Region 1</option>
  <option value="region2.html">Region2</option>
</select>

Объяснение логи c выше:

1. on('change' событие для обоих #region и #program
2. Установите соответствующую переменную programSelected или regionSelected в зависимости от события change
3. Функция запуска updateRegionOptions();
4. Если переменные programSelected и regionSelected оба имеют значение
5. Для каждого из параметров в #region
6. Измените существующий value на форму "?region=1" and "?region=2"
7. Обновите раздел value каждого из элементов option, чтобы иметь это значение

Соответствующий JSFiddle для обзора.

Если это решило вашу проблему вопрос, пожалуйста, примите этот ответ:)