Есть форма! В нем есть селект, в котором при выборе нужного сервиса появляются нужные поля - тут все работает как надо!
<div class="form-group">
<label>Select other type of Service</label>
<div class="ors-custom-select">
<select id="service" type="text" class="form-control required" placeholder="Service type" aria-required="true" name="service_type">
<option value="">Other type of Service</option>
<option class="js-show-prod js-show-prod2" value="Hourly/As Directed">Hourly/As Directed</option>
<option class="js-show-prod2" value="To Airport">To Airport</option>
<option class="js-show-prod1" value="From Airport">From Airport</option>
<option class="js-show-prod2" value="Point-to-Point Transfer">Point-to-Point Transfer</option>
<option class="js-show-prod2" value="Other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<!--Drop-Off Location-->
<div id="pickup_airport" style="display: none;" wfd-invisible="true">
<div class="form-group ors-autocomplete-wrap ors-autocomplete-wrap-lg">
<label for="address2" class="control-label autocomplete-label">* Pick-Up Location</label>
<div class="ors-autocomplete">
<input id="address2" ref="locationRef" type="text" autocomplete="off" class="form-control form-control-2 required required_s pac-target-input" placeholder="* Your pick-up location" name="pick_up_location_hr" aria-required="true" autocomplete="off">
</div>
</div>
</div>
<div id="pickup_hr" style="display: none;">
<div class="form-group">
<label for="pickup_hr">Number of Hours</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-clock"></i></span>
<input id="pickup_hr" type="number" min="3" class="form-control form-control-2 required required_s pac-target-input" placeholder="*Number of Hours (3Hrs Minimum)" name="pickup_hr" aria-required="true" min="1" step=".1">
</div>
</div>
</div>
<!--Drop-Off Location-->
<div class="form-group ors-autocomplete-wrap ors-autocomplete-wrap-lg">
<label for="address4" class="control-label autocomplete-label">Drop-Off Location </label>
<div class="ors-autocomplete">
<input id="address4" ref="drop_off_locationRef" type="text" autocomplete="off" class="form-control form-control-2 required required_s pac-target-input" placeholder="*Your drop-off location" name="drop_off_location" aria-required="true" autocomplete="off">
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById('service').addEventListener('change', function(){
let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod" );
document.getElementById('pickup_hr').style.display = isPear ? "block" : "none";
});
</script>
<script type="text/javascript">
document.getElementById('service').addEventListener('change', function(){
let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod" );
document.getElementById('pickup_airport').style.display = isPear ? "block" : "none";
});
</script>
<script type="text/javascript">
document.getElementById('service').addEventListener('change', function(){
let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod1" );
document.getElementById('pickup_street').style.display = isPear ? "block" : "none";
});
</script>
<script type="text/javascript">
document.getElementById('service').addEventListener('change', function(){
let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod2" );
document.getElementById('pickup_airport').style.display = isPear ? "block" : "none";
});
</script>
Так же есть аналогичный выбор где тоже есть сервис и здесь выбор не работает.
<div class="form-group">
<label>Select Return other type of Service</label>
<div class="ors-custom-select">
<select id="service_return" type="text" class="form-control required" placeholder="Service type" aria-required="true" name="service_type_return">
<option value="">Other type of Service</option>
<option class="js-show-prod0 js-show-prod20" value="Hourly/As Directed">Hourly/As Directed</option>
<option class="js-show-prod20" value="To Airport">To Airport</option>
<option class="js-show-prod10" value="From Airport">From Airport</option>
<option class="js-show-prod20" value="Point-to-Point Transfer">Point-to-Point Transfer</option>
<option class="js-show-prod20" value="Other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<!--Drop-Off Location-->
<div id="pickup_airport_return" style="display: none;" wfd-invisible="true">
<div class="form-group ors-autocomplete-wrap ors-autocomplete-wrap-lg">
<label for="address2_return" class="control-label autocomplete-label">* Return Pick-Up Location</label>
<div class="ors-autocomplete">
<input id="address2_return" ref="locationRef" type="text" autocomplete="off" class="form-control form-control-2 required required_s pac-target-input" placeholder="* Your pick-up location" name="pick_up_location_hr_return" aria-required="true" autocomplete="off">
</div>
</div>
</div>
<div id="pickup_hr_return" style="display: none;">
<div class="form-group">
<label for="pickup_hr1">Number of Hours</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-clock"></i></span>
<input id="pickup_hr1" type="number" min="3" class="form-control form-control-2 required required_s pac-target-input" placeholder="*Number of Hours (3Hrs Minimum)" name="pickup_hr_return" aria-required="true" min="1" step=".1">
</div>
</div>
</div>
<!--Drop-Off Location-->
<div class="form-group ors-autocomplete-wrap ors-autocomplete-wrap-lg">
<label for="address4_return" class="control-label autocomplete-label">Return Drop-Off Location </label>
<div class="ors-autocomplete">
<input id="address4_return" ref="drop_off_locationRef" type="text" autocomplete="off" class="form-control form-control-2 required required_s pac-target-input" placeholder="*Your drop-off location" name="drop_off_location_return" aria-required="true" autocomplete="off">
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById('service_return').addEventListener('change', function(){
let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod0" );
document.getElementById('pickup_hr_return').style.display = isPear ? "block" : "none";
});
</script>
<script type="text/javascript">
document.getElementById('service_return').addEventListener('change', function(){
let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod0" );
document.getElementById('pickup_airport_return').style.display = isPear ? "block" : "none";
});
</script>
<script type="text/javascript">
document.getElementById('service_return').addEventListener('change', function(){
let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod10" );
document.getElementById('pickup_street_return').style.display = isPear ? "block" : "none";
});
</script>
<script type="text/javascript">
document.getElementById('service_return').addEventListener('change', function(){
let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod20" );
document.getElementById('pickup_airport_return').style.display = isPear ? "block" : "none";
});
</script>
И в консоле пишет ошибку Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
