根据之前的字段答案自动填充下一个选择框

时间:2015-07-03 14:44:13

标签: php jquery html forms

如果第一个问题的答案是1,那么我有2个问题。我希望下一个答案自动填充为是。有人可以引导我朝着正确的方向前进吗?

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

如果答案是0,那么我只需要下一个问题就可以选择。

1 个答案:

答案 0 :(得分:1)

    使用jquery onchange,
给selectbox输入单独的id,
    使用jquery val()获取selectbox值
    使用if条件检查大于0

代码如下所示

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

相关问题