0

Есть форма! В нем есть селект, в котором при выборе нужного сервиса появляются нужные поля - тут все работает как надо!

<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')

3

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Посмотрите другие вопросы с метками или задайте свой вопрос.