javascript - 选择中选项更改的重置按钮和 Bootstrap 验证

Question

我有选择选项。在选项更改时，我显示不同的 div 并在提交之前使用 Bootstrap 验证器。如果输入为空并按下按钮，它将禁用。选项更改按钮未激活。如何在选项更改时重置输入和按钮？

$('#shexsselect').on('change', function() {
  value = $(this).val();
  if (value == 1) {
    //do something
  } else {
    //do something
  }
});

$(document).ready(function() {
  $('#form_fin').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon',
      invalid: 'glyphicon',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      pinofsv: {
        message: 'The username is not valid',
        validators: {
          notEmpty: {
            message: 'for label 2'
          },
        }
      },
      shexsselect: {
        validators: {
          notEmpty: {
            message: 'choose'
          }
        }
      },
      voen: {
        validators: {
          notEmpty: {
            message: 'for label2'
          }
        }
      }
    }
  });
});

<form name="form_fin" id="form_fin" action="" method="POST">
  <div class="col-sm-12">
    <div class="form-group" id="shexsdiv">
      <label>Selectionn: </label>
      <select class="form-control " name="shexsselect" id="shexsselect" required>
        <option value='' selected disabled>Choose</option>
        <option value='1'>First</option>
        <option value='2'>Second</option>
      </select>
    </div>
  </div>
  <div class="col-sm-12" id="voendiv">
    <div class="form-group">
      <label>label2:</label>
      <input type="text" class="form-control " name="voen" id="voen">
    </div>
  </div>
  <div class="col-sm-12" id="fin_input">
    <div class="form-group">
      <label>Label2:</label>
      <div class="input-group">
        <input type="text" class="form-control" name="pinofsv" id="pinofsv" required />
      </div>
    </div>
  </div>
  <div class="col-sm-12">
    <button type="submit" class="btn btn-info" name="checkfin" id="checkfin">Submit</button>
  </div>
</form>

我试过 excluded: [':disabled'], 但它没有帮助，jquery 试图重置和清除，但没有帮助

Answer 1

在您的 select 中添加 onchange 并在那里调用您的函数来重置输入字段的值。

下面是工作代码:

function resetFields() {
  document.getElementById("voen").value = "";
  document.getElementById("pinofsv").value ="";
}

<form name="form_fin" id="form_fin" action="" method="POST">
  <div class="col-sm-12">
    <div class="form-group" id="shexsdiv">
      <label>Selectionn: </label>
      <select onchange="resetFields()" class="form-control " name="shexsselect" id="shexsselect" required>
        <option value='' selected disabled>Choose</option>
        <option value='1'>First</option>
        <option value='2'>Second</option>
      </select>
    </div>
  </div>
  <div class="col-sm-12" id="voendiv">
    <div class="form-group">
      <label>label2:</label>
      <input type="text" class="form-control " name="voen" id="voen">
    </div>
  </div>
  <div class="col-sm-12" id="fin_input">
    <div class="form-group">
      <label>Label2:</label>
      <div class="input-group">
        <input type="text" class="form-control" name="pinofsv" id="pinofsv" required />
      </div>
    </div>
  </div>
  <div class="col-sm-12">
    <button type="submit" class="btn btn-info" name="checkfin" id="checkfin">Submit</button>
  </div>
</form>

阅读here有关 onchange 事件的更多信息