简体   繁体   中英

Auto populate next select box based on previous field answer

I have 2 questions if the answer to the first question is 1> I want the next answer to be auto populated as Yes. Can someone steer me in the right direction please?

<div class="field">
  <!-- Number of Employees -->
  <label>Number of Employees</label>
  <div class="styled-select">
    <select name="NoOfEmployees" class="validate[required]" data-prompt-position="topLeft:110,15">
      <option value="">Please select</option>
      <?php
      foreach (range(0, 49) as $number) {
          echo '<option value="'.$number.'">'.$number.'</option>';
      }
      ?>
      <option value="50 Plus">50+</option>
    </select>
  </div>
</div>

<div class="field">
  <!-- Employers Liability Cover Required -->
  <label>Employers Liability Cover Required</label>
  <div class="styled-select">
    <select name="EmployersLiabilityCover" class="validate[required]" data-prompt-position="topLeft:110,15">
      <option value="">Please select</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  </div>
</div>

If the answer is 0 then I just need the next question to stay as Please Select.

use jquery onchange ,
give selectbox inputs seperate id,
Use jquery val() to get selectbox value
use if condition to check its greater than 0

code shown below

<div class="field">
    <!-- Number of Employees -->
    <label>Number of Employees</label>
    <div class="styled-select">
        <select name="NoOfEmployees" class="validate[required]" id="select1" data-prompt-position="topLeft:110,15">
            <option value="">Please select</option>
            <?php
            foreach (range(0, 49) as $number) {
                echo '<option value="'.$number.'">'.$number.'</option>';
            }
            ?>
            <option value="50 Plus">50+</option>
        </select>
    </div>
</div>

<div class="field">
    <!-- Employers Liability Cover Required -->
    <label>Employers Liability Cover Required</label>
    <div class="styled-select">
        <select name="EmployersLiabilityCover" id="select2" class="validate[required]" data-prompt-position="topLeft:110,15">
            <option value="">Please select</option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </div>
</div>

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
    $('#select1').on('change', function() {
        if(this.value>0)
        {
            $("#select2").val("Yes");
        }
        else
        {
            $("#select2").val("");
        }
    });
</script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM