当我更改选择值时为空表单字段答案

【问题标题】：empty form fields when I change value of select当我更改选择值时为空表单字段
【发布时间】：2020-11-19 23:30:52
【问题描述】：

我有一个包含选择类别 ID 的表单，它允许隐藏和显示输入标题和名称以及选择类型，我希望当我更改类别 ID 值时，所有其他字段必须为空。

$(document).on('change', '#category_id', function() {
     $("#divt > input,#divtn > input,#divty > input").val('');
  var stateID = $(this).val();
  //alert(stateID);
  if (stateID == '1') {
     $("#divt").hide();
     $("#divn").hide();
     $("#divty").show();
  }else if(stateID == '2'){
     $("#divt").show();
     $("#divn").show();
     $("#divty").hide();
  }   
});

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <form id="myform">
     <div class="form-group">
     <label>Categories <span class="text-hightlight">*</span></label>
     <select class="form-control" name="category_id" id="category_id">
        <option>select</option>
        <option value="1">title</option>
        <option value="2">name</option>
     </select>
   </div>
    <div class="form-group" id="divt">
      <label>title <span class="text-hightlight">*</span></label>
      <input type="text" name="title" class="form-control"/>
    </div>
    <div class="form-group" id="divn">
      <label>name <span class="text-hightlight">*</span></label>
      <input type="text" name="name" id="name" class="form-control"/>
    </div>
    <div class="form-group" id="divty">
     <label>type <span class="text-hightlight">*</span></label>
     <select class="form-control" name="type">
        <option></option>
        <option value="1">type a</option>
        <option value="2">type b</option>
     </select>
   </div>
 </form>
 </div>

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

要重置选择字段，您需要此代码

$("#divty").find('option:first-child').prop('selected', true)
    .end().trigger('chosen:updated');

这里是工作的 sn-p：

$(document).on('change', '#category_id', function() {
     $("#divt > input,#divtn > input,#divty > input").val('');
  var stateID = $(this).val();
  //alert(stateID);
  if (stateID == '1') {
     $("#divty").find('option:first-child').prop('selected', true)
    .end().trigger('chosen:updated');
     $("#divt").hide();
     $("#divn").hide();
     $("#divty").show();
  }else if(stateID == '2'){
     $("#divt > input").val('');
     $("#divn > input").val('');
     $("#divt").show();
     $("#divn").show();
     $("#divty").hide();
  }   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <form id="myform">
     <div class="form-group">
     <label>Categories <span class="text-hightlight">*</span></label>
     <select class="form-control" name="category_id" id="category_id">
        <option>select</option>
        <option value="1">title</option>
        <option value="2">name</option>
     </select>
   </div>
    <div class="form-group" id="divt">
      <label>title <span class="text-hightlight">*</span></label>
      <input type="text" name="title" class="form-control"/>
    </div>
    <div class="form-group" id="divn">
      <label>name <span class="text-hightlight">*</span></label>
      <input type="text" name="name" id="name" class="form-control"/>
    </div>
    <div class="form-group" id="divty">
     <label>type <span class="text-hightlight">*</span></label>
     <select class="form-control" name="type">
        <option></option>
        <option value="1">type a</option>
        <option value="2">type b</option>
     </select>
   </div>
 </form>
 </div>

【讨论】：

【解决方案2】：

如果你想清空文本框的值，我猜第 2 行的选择器是错误的

试试

$("input.form-control").val('');

或 $("#myform input.form-control").val('')

【讨论】：

谢谢你的回答，它适用于输入但不适用于选择选项